CSS を使用して画像に複数の透明なオーバーレイを追加する方法

三角形を押して白い円の上にコンテンツを含めるにはどうすればよいですか?画像の一部として 3 つのオーバーレイ形状を含む背景画像を使用してヒーロー セクションを作成する解決策を見つけようとしています。オーバーレイの上には h1、p、btn が表示されます。デザインがどのように見えるかを示すスクリーンショットを以下に示します。次の 3 つのオーバーレイがあります。 下部の透明度が 0% の直角形状。透明度のある外側の円。透明感のある内側の円。これが私がこれまでに持っているものです。以下にスニペットを示しました。Codepen には実用的なバージョンもあります。サークルの位置は

P粉777458787 2024-02-25 17:09:14 0  1  423

画像を変換およびフィルタリングするとオーバーレイが生成されます

画像にホバーすると画像のサイズが大きくなり、ホバーした画像が他の画像によって切り取られないコードを見つけました：tutorialsrepublic.com しかし、次のコードも入力すると： img{transition:filter.5sease-in -out ;-webkit-filter:grayscale(100%);filter:grayscale(100%);}img:hover{-webkit-filter:grayscale(0%);filter:gr

P粉276876663 2023-09-15 20:58:43 0  1  1016

オーバーレイ画像を画像境界内に保ちます - 画像にのみ貼り付くように制限します

画像にオーバーレイを貼り付けようとしていますが、このオーバーレイは上部のメニューバーにまで広がっており、画像に貼り付ける方法がわかりません。画像のサイズを変更したり、位置を変更したりするさまざまな方法を試しましたが、それでもメニューバーにはみ出してしまいます。上部の位置を調整すると全画面表示になるための小さな修正ですが、モバイルではメニューが非表示になるため機能しません。そして、サイズが変更されると、画像の下に流れます。 header{border-bottom:5pxsolidcoral;font-family:A

P粉838563523 2023-09-20 22:57:13 0  1  614

ページに画像が読み込まれない

Web アプリケーションにスライド画像をロードしたいので、Bootstrap カルーセルを使用しています。背景から写真を取得します。画像はイメージ状態で保存されます。以下はデータを取得するための JSON 形式です。画像:[{SNO:'1',NAME:'image.jpg',PIC_NAME:'image'}] 画像をアップロードした後、画像は Nodejs の特別なフォルダーに保存され、そこからエンドポイントを使用して画像。以下は Nodejs コードです image.get('/Images/getImag

P粉238433862 2023-09-09 20:59:03 0  1  581

レイアウトの変更を防ぐために、可変サイズの画像をロードする前にそのスペースを予約するにはどうすればよいですか?

テキスト、画像タグ、および次のようなテキストを含む HTML ページがあります。これは画像の前のテキストです。 <imgsrc="image.jpeg"/>これは画像の後のテキストです。画像の読み込みに時間がかかるため、ページが読み込まれるとき、画像よりも先にテキストが読み込まれるようになりました。そのため、画像の後のテキストが画像の前のテキストの直後に配置されるようにレイアウトが変更され、画像がまだ読み込まれていない場合、画像用のスペースは確保されません。ただし、画像を読み込むと、画像の後のテキストが下に移動します。

P粉936509635 2023-08-28 00:04:44 0  1  593

ファイルローダーを使用してWebPackイメージがロードされない

現在、いくつかの SVG イメージと背景イメージを必要とする webpack5 プロジェクトがあります。 svg イメージは template.html ファイルにエンコードされます。背景画像は style.css ファイルで参照されます。ビルドを実行すると、Web ページ上にイメージがビルドされません。ファイル ローダー テストでカスタム名を使用した場合でも、ハッシュ形式のままです。現在の Webpack 構成ファイルは次のとおりです: constpath=require('path');constHtmlWebpackPlugin=req

P粉513318114 2024-03-19 19:54:32 0  1  268

画像サイズがコンテナ制限を超えています

次のスクリーンショットを投稿しました。1 つの画像がコンテナーの制限を超えている一方で、他の画像は正しくスタックされていることが示されています。 CSSではまだ何もしていません。 enterimagedescriptionhere この特定の画像に対して特に max-width を使用しようとしましたが、すべての画像を含む div をグリッドとして表示するとすぐに制限を超えてしまいます。

P粉083785014 2023-08-14 20:13:56 0  1  554

添付画像をHTMLメールに埋め込む

電子メールに画像を添付する場合、HTML コンテンツ内に画像を配置するにはどうすればよいですか?画像ソースとしてファイル名だけを使用しようとしましたが、うまくいかないようです。

P粉285587590 2023-08-24 18:08:00 0  2  521

onclick() 関数による画像の変更

オブジェクトをクリックすると、ある写真を別の写真に変更したいと考えています。コードは次の順序でスタックされます。 私が望むのは、クリックすると、画像が色付きの画像、つまり別の画像に置き換えられることです。これで、JQuery/JS を使用して実行できることがわかりました。しかし、このような単純な機能を実現するために大量の JS コードを追加したくありません。これを達成するより簡単な方法はありますか? pseudo-selector.activeクラスのようなメソッド？分かりません。

P粉242535777 2023-08-18 08:53:28 0  1  480

Nuxt3でURLから動的画像をロードするにはどうすればよいですか?

特定の URL (auth0 画像) から取得した動的画像をロードできない nuxt3 コンポーネントがあります。私のテンプレートは次のようになります: <template><imgclass="h-28w-28rounded-fullborder-4border-blackbg-gray-300":src="image"alt=""/><p>{{{name

P粉236743689 2023-08-30 10:17:55 0  1  565

オーバーレイとマーカーを含む Mapbox マップを HTML からエクスポート/ダウンロード

顧客がパーソナライズされた地図を作成できる HTML ページを構築したいと考えています。これを作成するにはMapboxを使用しました。この地図の上にはオーバーレイがあり、顧客は地図上にマーカーを配置することもできます。しかし、私は 2 つの大きな問題に悩まされています。それは、オーバーレイやマーカーを含む高品質の地図画像を取得する方法です。ポスターに印刷したいので。顧客が「保存」をクリックして購入した後、この画像がサーバーに送信され、印刷できるようにするには、このロジックをオンライン ストアに実装するにはどうすればよいでしょうか。 https://www.カルティダ

P粉459578805 2024-03-29 11:15:04 0  1  481

javascript - echarts で積み上げ縦棒グラフを作成するときに問題が発生しました。アドバイスをお願いします。

1. 縦棒グラフが積み上げられていて、各データに画像の注釈がついていますが、配置や表示がわかりません。 2. 赤丸内の各シリーズデータは詳細フレームを表示する必要がありますが、マークポイントしか使用できませんか?この要件は達成されていますか?見つけ方は？ .....ヘルプ.....

PHP中文网 2017-05-19 10:39:11 0  2  606

Ionic イメージ読み込みのヒント

Ionic と Vue3 をいじってるだけです。しかし、ion-img タグを使用すると、assets フォルダーから読み込まれた画像が正しく表示されません。フォルダー構造: -assets--logo.svg-views--Authentication.vue 標準の HTMLimg を使用して画像をロードすると正常に動作しますが、ion-img を使用すると正常に動作しません。 <ion-row><imgsrc="../assets/logo.svg&q

P粉416996828 2023-08-26 20:03:50 0  1  586

Filepond は画像をレンダリングする前に認証ヘッダーを追加します

Vue アプリケーションで filepond プラグインを使用しています。私のアプリケーション要件に完全に適合します。現在、バックエンド サービスは JWT 認証経由で画像を提供しています。カスタムヘッダーをファイルプールに追加してコンポーネントに画像をロードするにはどうすればよいですか?これが私が達成したことです<file-pondref="file"name="filepond":label-idle="placeholder"accepted-fi

P粉201448898 2024-03-27 13:06:23 0  1  432

JavaScript クイズ アプリケーションに画像を追加する方法

JavaScript クイズ アプリに画像を追加しようとしていますが、さまざまな方法で「imgsrc」属性を追加するなど、すべてを試しましたが、何も機能しないようです。実行する必要があるプロジェクトで機能するように支援してください。これは私のコードです... constquizData=[{question:"Whichlangrunsinawebbrowser?",a:"Java",b:"C",c:"P

P粉333186285 2024-02-03 20:47:02 0  1  363

写真内の画像のアスペクト比

次のようなタイトルの画像があります。 タイトル CSS には img{max-width:100%} もあります。画像の幅と高さを同時に設定し、幅が設定値を下回った場合でもそのアスペクト比を維持したいと考えています。それで、私は次のようなコードを試しました： タイトル これはほぼ私が望むものですが、画像が「レターボックス化」されている場合、タイトルは画像の下部からかなり離れています。タイトルを画像の下部にぴったりと合わせたまま、希望の結果を得る方法はありますか?

P粉557957970 2023-08-17 20:24:04 0  1  483

Highcharts を使用して Vue.js で積み上げドーナツ (円) グラフを作成するにはどうすればよいですか?

Highcharts を使用してドーナツ チャートを作成したいのですが、このチャートを積み上げ形式に変換できません。 Vue.js コードは次のとおりです: <template><div><b-colmd="12"style="margin-top:40px"><highcharts:options="pieChartOptions"></high

P粉980815259 2024-03-19 19:17:54 0  1  482

bodyタグのbackground-imageプロパティにアニメーションを追加する: ステップバイステップガイド

styleタグで背景画像を使用しています。 <style>body{background-image:url("img.jpg");background-size:cover;transition:background-image4slinear;}</style>ページに別の div を追加せずに画像をフェードインさせたい。この目標は達成できるでしょうか？

P粉347804896 2024-03-29 21:59:19 0  2  439

モーダル内の画像をクリックして複数の画像を変更したい

ポップアップ/モーダルにはgsap.jsを使用しています。私は forEach を使用しているので、このサイトに同じパーツをどれだけ追加しても問題なく動作します。私の唯一の目標は、これを何とか完璧に動作させることです。ポップアップされる「ボタン」をクリックするたびに、9 つの画像が表示されます。その中から 4 つを選択して「編集を保存」をクリックします。「編集を保存」を押すと、本文が表示されます。画像に 4 つの画像本体がある場合、自動的に変更されます。そして何度でも変更できます。 constitems=doc

P粉269530053 2024-01-29 09:35:00 0  1  380

Elementorエディターを使用して画像に丸い角を追加する方法

これは私を夢中にさせます。単純なElementorページのテキストボックスに画像があります。 「テキスト エディター ウィジェット」内にうまく収まるので、それに丸い角を追加したいと思います。 「サイト設定/カスタムCSS」でCSSクラスを作成し、テキストエディタの画像エディタでそのクラスに画像を割り当てました。 .AZ-rounded-image{border-radius:15px;} でも何も起こりません...誰か助けてくれませんか - これで 3 時間を無駄にしました...ありがとう、アンディ

P粉821231319 2023-08-15 19:14:43 0  1  569