透明な半円の切り抜きのある Div

CSS3だけで半円の透明な切り抜きを作りたいと思っています。唯一の要件は、形状を形成するすべての要素が黒または透明であることです。半円は透明で背景が透けて見える必要があるため、黒い長方形の上に白い円を置くことはできません。必要な形状:

P粉022285768 2023-10-22 17:51:09 0  2  768

3 つの SVG ファイルをページ上で中央揃えにするにはどうすればよいですか?

3 つの個別の SVG ファイルがあり、それぞれを重ね合わせるとグラフィックが作成されます。最初の SVG ファイルは赤い三角形、2 つ目は三角形の内側にある青い円、3 つ目は三角形の底辺にある紫色の長方形です (三角形と長方形の間には少しスペースがあります)。私の目標は、3 つの SVG ファイルすべてをページの中央に重ねて配置することです。以下は私の HTML と CSS コードです。 *{マージン:0;パディング:0;ボックスサイズ:ボーダーボックス;}.graphic{高さ:1

P粉998100648 2023-09-07 14:20:58 0  2  631

JavaScript - フラットリスト ドロップダウン コンポーネント スタイルをカスタマイズするにはどうすればよいですか?

1. まず、達成したい効果について説明します。携帯電話で JD.com のような画像をプルダウンし、手を放した後、新しいページにジャンプします。 2. ただし、フラットリストにはデフォルトのドロップダウン イベント {code...} があります。ドキュメント内のこのヘッダー コントロールを変更する方法がわかりません。Android のデフォルトでは、黒い円形の更新コンポーネントが設定されています...

PHP中文网 2017-06-08 11:02:39 0  1  1336

Plotly ヒートマップ上の個々のピクセルを選択/固定します

Plotly ヒートマップでは、2 つの選択モードがあると便利な場合があります: 長方形選択 (modbar ですでに利用可能) 個々のピクセルの選択/固定: 不要な既存の「drawcircle」ボタンをリサイクルすることでこれを実現しようとしました。クリックすると、ピクセルがハイライト表示されるか、その上に色付きのディスク (または Google マップ UI のような赤い「プッシュピン」) が表示されます。 問題: modbar でdrawcircle ツールが選択されている場合、plotly_click イベントが起動しません (そのため、座標を取得できません)、およびplotly_s

P粉806834059 2023-09-02 14:57:46 0  1  654

書き換えられたタイトルは次のとおりです: CSS 3 図形: 「Reverse Circle」または「Cut Circle」

「逆円」と表現される形状を作成したいと考えています。黒い線が div 要素の外側の境界線に沿って続く必要があるため、画像は多少不正確です。現在私が持っているデモは次のとおりです: http://jsfiddle.net/n9fTF/ 画像なしで CSS を使用することは可能ですか?

P粉979586159 2023-08-24 18:26:55 0  2  448

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

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

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

SVG または CSS を使用してハイブリッドの直線/曲線セクション境界を作成するにはどうすればよいですか?

私のアプリケーションでは、標準以外のセクション境界を持つ登録ページを作成しています。ここで私が何を達成しようとしているのかがわかります。これは単純な円弧ではありません。2 本の直線と、その間に 1 つの円弧があります。私の知る限り、このようなことを実現する最良の方法は SVG を使用することです。問題は、白い領域に領域全体を覆う画像が表示されてしまうことです。デモ用に、水色を使用します。背景画像属性を持つ標準の div を使用すると、SVG の白色は不透明になるため、次のようになります: 後で読むためのヒント sha

P粉920835423 2023-09-02 11:35:13 0  1  631

画像の開始点と終了点

画像の開始点と終了点を設定しようとしています。それで、キャンバスと画像があり、画像をキャンバスに配置すると、開始点/終了点の上にマウスを置いたときに小さな赤い円が点灯するようにしたいのですが、これは他の画像を接続して作成できることを意味します。例: 1) 画像をドラッグします。 2) 画像をキャンバスに配置します。 3) マウスを開始点/終了点に移動すると、小さな赤い点が点灯します。ご覧のとおり、赤い点はホバー時にのみ表示されます。もう 1 つの質問ですが、最初の質問を解決できれば、画像がグリル (正方形) に従っていません。これは html/js のコンストレジスタの例です。

P粉511757848 2023-08-31 12:24:51 0  1  585

HTML、CSS、SVG を使用してスケーラブルな標識を作成する

道標（先端のある長方形）の形のボタンを作成したいと考えています。 _______|\|_______/各テキストの長さが異なるテキストを動的にロゴに書き込みたいと考えています。グラフィックのみを背景グラフィックとして使用してこれを試してみると、矢印はそれに応じて拡大縮小および圧縮/伸縮されます。したがって、これを行う方法は、テキストを通常の div に配置し、CSS:after を使用して矢印を SVG として追加することです。矢印は完全に塗りつぶされているはずです。つまり、フレームの問題に対処する必要はありません。 （見やすくするためにSVGを黒のままにしました）最初の問題は、矢印が常にブロ...

P粉555682718 2024-03-31 14:45:14 0  1  468

JavaScript - React でコンポーネントを強制的に更新するにはどうすればよいですか?

URL を通じて画像をロードするコンポーネント内に <img src='127.0.0.1/img' /> タグがあります。最初は真っ白な画像が返されると想定されています。ユーザーがボタンをクリックした後、背景処理画像が真っ黒になります。現時点では、クライアントがこの変更を自動的に更新でき、画像が次のように表示されることを願っています...

漂亮男人 2017-05-19 10:30:06 0  3  1082

React を使用して画像上にインタラクティブ マーカーを配置する

助けてください。ホームページには以下のような画像が表示されています（拡大画像）。 「FORGE」の家には、中央に黒い矢印が付いた白と青のマーカーがあることに注意してください。 「賃貸」住宅も同様です。これらのマーカーはそれぞれ、インタラクティブなボタンとして機能します。予想されるインタラクション動作は次のとおりです: ホバーすると、青い背景が拡大して「Forge」または「Rentals」というテキストが表示されます。クリックすると、ユーザーは適切な「Forge」または「Rentals」ページに移動します。また、画面のサイズが変更されたときに応答するようにしたい、

P粉896751037 2023-09-08 21:25:41 0  1  851

子 div の左マージンが負であるため、親 div を中央に配置できません。

次の div を作成しましたが、負の左マージンを使用してアイコンをオフセットしているため、div 全体を中央に配置できません。デスクトップでは div 全体が少し左に移動していることは簡単には分からないので問題なくできますが、モバイルでは円形のアイコンの左側が切り取られます。 div全体を中央に配置するにはどうすればよいですか? .icon-text-box{border:1pxsolidred;}.icon-box{background:#fff;border-radius:33px;margin:6remauto

P粉677573079 2024-01-29 15:04:54 0  1  514

SafariでCSSを使用して円形の<ボタン>に円形のアウトラインを取得する方法

同じ色の輪郭を持つ丸いボタンを取得しようとしていますが、それは不可能のようです。輪郭は常に正方形になります。これを a で実現する方法はありますか、それとも a でのみ実現できるのでしょうか?ボタン{幅:40px;高さ:40px;境界線:なし;境界線の半径:40px;カーソル:ポインター;背景色:黒;表示:継承;アウトライン:5pxsol

P粉066725148 2023-10-26 09:54:54 0  2  1050

ナビゲーションバーのホバー効果を実装する方法

垂直ナビゲーションバーを作成中です。そのアイコンの名前が右側に表示されるはずです。また、マウスをアイコンの上に置くと名前が白から黒に変わるはずですが、機能しません。それが役立つかどうかを確認するためにタグを変更してみました。また、HTML のタグを変更し、CSS のタグも変更してタグが機能するようにしました。このサイトで問題の解決策を探しました。ナビゲーション バーが機能しません。ここにコードを置く方法がわかりません。お役に立てれば、メッセージ経由でコードを送信させていただきます。理解するのに30分以上費やした

P粉041758700 2024-01-10 18:06:56 0  1  442

Div の外での画像の移動

ページの中央に黒い div がある Web サイトを作成しています。その上にマウスを置くと、中央の画像が回転します。問題は、画像を div 内に配置したにもかかわらず、div の境界の外に出てしまうことです。この問題を解決するにはどうすればよいでしょうか?これは私の HTML コードです: constimage=document.getElementById("pic");image.classList.add("rotate");constclone

P粉004287665 2023-08-13 15:21:15 0  1  458

Chartjsの凡例をtrueに設定した後でも表示されません

私は ChartJS をあまり使用したことがなく、ドーナツ チャートにラベルを表示する方法を探しています。オプションで凡例の表示設定を true に設定しようとしましたが、まだ機能しません。 vardata=[{data:[成功したビルド数,失敗したビルド数],ラベル:["成功","失敗"],背景色:["緑",&quot

P粉595605759 2023-09-14 18:38:17 0  1  578

JavaScript - Html5 またはオリジナルの JS を使用してオンラインで画像を角丸長方形に切り抜くにはどうすればよいですか?

h5 または js で、Web ページ上の画像をトリミングして角を丸くカットする方法はありますか?現在のところ、長方形のカットしか見たことがありませんが、角が丸い透明な .png カットを実現できないでしょうか。

ringa_lee 2017-06-08 11:03:09 0  2  825

オブジェクトの上にカーソルを置くとオブジェクトが消え、別のオブジェクトが表示されてクリックできるようにするにはどうすればよいですか?

最初のオブジェクトは、クラス「dog-letter」のオブジェクトです。これには、クラス「dog」と「letter」の 2 つのオブジェクトがあります。ホバーすると消えるようにすることができました。 2 番目のオブジェクトは、「犬の鼻」クラスの黒い円です。しかし、このオブジェクトが表示された後はクリックできません。 z-index:1 を使用するように更新した後、最初のオブジェクトには一貫性が得られますが、2 番目のオブジェクトを毎回クリックすることはできません。カーソルを少し動かしてもクリックできません。 .dog-letter-box{border-top:1pxsolid#555;bor

P粉817354783 2024-04-01 13:23:16 0  1  510

Nuxt と Vue のソーシャル チャット

Vue ソーシャル チャット モジュールを Nuxt アプリにインストールしましたが、小道具と色の設定がどのように機能するのか理解できません。現在、すべてが正常に動作していますが、表示されている Whatsapp アイコンは黒で、上部のバーは吹き出し内にあります。 Nuxt でこの設定を変更するにはどうすればよいですか。著者は CSS 変数を使用するように言っていますが、これらの変数をどこに配置するか、コード内でどのように使用するかがわかりません。 Nuxt には App.vue もないので、モジュールを直接インポートしました。これで機能するようですが、正しくできているかどうかはわかりません。...

P粉993712159 2024-03-26 20:55:20 0  1  488

問題 2003 (HY000) を修正する方法: MySQL サーバー 'db_mysql:3306' に接続できません (111)

最近、FastAPIPython サーバーをコンテナ化しようとしました (レプリケーション/二重化の目的でもあります)。以前は、Docker コンテナーに MySQL サーバーだけを入れてすべて問題なかったのですが、Web サーバーもサービスにしたところ、MySQL サーバーに接続できなくなり、アプリケーションが動作しなくなりました。以下は、アプリケーション fromfastapiimportFastAPIimportmysql.connectorapp のサーバー データベース初期化コネクタのコード スニペットです。

P粉178132828 2023-09-05 11:18:47 0  1  848