CSS 透明ボーダー背景クリップマジック

CSS 透明ボーダー背景クリップマジック

この記事では、CSSの透明な境界線の背景クリップの素晴らしい使い方を主に紹介し、みんなと共有し、自分自身のためにメモを残します。

<div class="border"></div>
。国境 {  
  幅: 300ピクセル;  
  高さ: 300px;  
  背景: url("https://waiqin.oss-cn-shenzhen.aliyuncs.com/jxb-vip-ts/activitys/activitys15677540269589timg.jpg");  
  背景サイズ: カバー;  
  左マージン: 100px;  
  境界線: 10px実線 rgba(255,255,255,.6);  
  背景クリップ: パディングボックス;  
}

background-clip: パディングボックス; キーコード

background-clip プロパティの初期値は border-box です。これは、背景が要素の境界ボックス (境界の外側の端) によってクリップされることを意味します。背景が境界線を侵食しないようにするには、その値を padding-box に設定するだけで、ブラウザは内側の余白の外側の端を使用して背景を切り取るようになります。

効果

background-clip: padding-box; がない場合、半透明の境界線を通して背景画像が見えることがわかります。

追加後、背景が境界で切り取られます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Vue3コンポーネントの開発詳細

>>:  DHTML オブジェクト (さまざまな HTML オブジェクトの共通プロパティ)

推薦する

k8sとDockerの関係についての簡単な説明

最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...

CSS ですべての子要素を選択し、スタイルを追加する方法

方法:実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...

VueのkeepAliveコンポーネントの機能と使い方の詳細な説明

序文面接中、多くの面接官は「keep-alive が何をするのか知っていますか?」と質問する際に V...

Dockerイメージが消える問題を解決する

1. 50と93では鏡像が消える [root@h50 /]# df -h ファイルシステムの使用済み...

Web でよく使われるフォントの紹介 (iOS および Android ブラウザでサポートされているフォント)

年末なので仕事も少なくなっています。私が何もせずにいるのを見ると、上司はきっと不快に思うでしょう。そ...

js の Array.forEach でループを終了する方法の例

目次forEach() メソッドjs の Array.forEach のループから抜け出す方法解決:...

fullpage.js フルスクリーンスクロールの具体的な使い方

1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...

docker run 起動パラメータ コマンドを表示する方法 (推奨)

runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...

docker runの--rmオプションの使用方法

Docker コンテナが終了しても、デバッグを容易にし、ユーザー データを保持するために、デフォルト...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

デザインにおいて無視できないインタラクティブデザインにおける製品状態の分析

製品デザインのプロセスにおいて、デザイナーは常に写真を非常に美しくすることを好みます。仮想ページのコ...

Linux コマンドを素早く習得する 4 つの方法

Linux マスターになりたいなら、いくつかの Linux コマンドを習得することが不可欠です。 L...

Zabbix を使用して Oracle データベースを監視する方法の詳細な説明

1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...

モバイル Web アプリ上の画像が鮮明ではなく、非常にぼやけているのはなぜですか?

なぜ?最も簡単に言えば、ピクセルは均等ではないということです。携帯電話に表示される写真はとても繊細に...

WindowsでのNginxの起動や停止などの基本操作コマンドの詳しい説明

Windows で Nginx を使用するには、Nginx サービスの起動、停止、Nginx のリロ...