CSS で opacity 属性を使用して背景画像に透明度を追加する方法 (コード)

この記事の内容は、CSS で背景画像に透明度 (コード) を追加する方法についてです。必要な方は参考にしていただければ幸いです。

CSS で背景画像に不透明度属性を直接追加することはできません。次の方法を使用してこの制限を回避できます:

div {
  width: 200px;  
  height: 200px;  
  display: block;  
  position: relative;
  }
div::after {
  content: "";  
  background: url(image.jpg);  
  opacity: 0.5;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  position: absolute;  
  z-index: -1;   
}

関連推奨事項:

CSS の透明不透明度と透明度フィルターの IE バージョンの最も正確な使用方法。 filter

CSS3の不透明度属性を使って透明効果を設定する方法の紹介

以上がCSS で opacity 属性を使用して背景画像に透明度を追加する方法 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。