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 オブジェクトの共通プロパティ)

推薦する

W3C チュートリアル (8): W3C XML スキーマのアクティビティ

XML スキーマは、DTD に代わる XML ベースのものです。 XML スキーマは、DTD に代わ...

背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...

VueプロジェクトにPWAを導入する手順

目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...

CentOS での Docker の詳細なインストール チュートリアル

DockerにはCEとEEがあり、CE版はコミュニティ版(無料)、EE版はセキュリティを重視したエン...

Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法

最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...

ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...

Mysql GTID Mha 設定方法

Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明

問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...

Nginx プロキシ転送構成を通じてクロスドメイン API プロキシ転送を実装する方法

序文WEB 開発では、クロスドメイン リクエストが頻繁に発生します。クロスドメインの問題を解決する方...

HTML ハイパーリンク スタイル (4 つの異なる状態) の設定例

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

TypeScriptの列挙型を詳しく説明する

目次1. デジタル列挙2. 文字列の列挙3. 逆マッピング4. 異種列挙5. 定数列挙6. 列挙メン...

Linuxルートの初期値を設定する方法の簡単な分析

Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム

システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...

HTML の iframe と frame の違いを例を使って説明します

プロジェクトで frameset 属性を使用したことがあるかどうかはわかりません。昨年、オンライン ...