[TIL]背景-画像の透明性
5778 ワード
コンテンツ(文字など)を保持する場合には,背景画像のみを透明化する方法を探した.何が難しいの?不透明度をそのまま適用すればいいのでしょうか?
しかし、何度も試みたが、この死に物狂いの背景画像にのみ不透明性を適用するCSS構文は存在しない.
もちろん、方法は存在します.符号化の面では、不可能なことは何もありません.背景画像を担当するElementを別途作成すればいいですそこから一番クレイジーな方法を学びたい.
ベースとなるdiv要素CSS
/* 배경을 넣고자하는 div 엘리먼트 */
.im-div {
position: relative;
z-index: 1;
}
背景画像用レイヤーCSS
本来、Elementを単独で書くにはHTML部分に触れる必要があるが、CSSだけでこの問題を解決する方法がある.仮想要素
::afterです.::afterは、要素の最後のサブ要素であり、ぎじげんそを生成する.通常はcontentプロパティとともに使用され、ある要素に装飾的な内容を追加するときに使用される要素です.どのように使うかは例を通して学ぶことです.
.im-div::after {
position: absolute;
background-image: url('이미지 주소');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0.5; /* 우리가 실제 적용하기 위한 옵션! */
z-index: -1;
}.im-div {
position: relative;
z-index: 1;
}
.im-div::after {
position: absolute;
background-image: url('이미지 주소');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0.5; /* 우리가 실제 적용하기 위한 옵션! */
z-index: -1;
}Reference
この問題について([TIL]背景-画像の透明性), 我々は、より多くの情報をここで見つけました https://velog.io/@tok1324/TIL-Background-image-투명화하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol