0
마우스를 가져 가면 이미지의 색상을 배경 이미지로 변경하려고합니다. 나는 거의 그것을 성취 할 수 있었지만 색깔은 div 안에있는 텍스트 위로 간다.마우스를 올리면 배경 이미지가 색상으로 변경됩니다.
HTML :
는<div>
<h3>LIPSUM DOLORES DILORES DUM DUM</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged.</p>
</div>
CSS :
div {
background-image: url("https://static.pexels.com/photos/127028/pexels-photo-127028.jpeg");
background-size: cover;
width: 300px;
height: 300px;
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.8s;
}
div:hover:before {
opacity: 1;
background: rgba(0, 0, 0, 1);
transition: all 0.8s;
}
div h3,
div p,
body {
margin: 0;
padding: 0;
}
div h3,
div p {
color: red;
z-index: 1000;
}
https://jsfiddle.net/j65k4LtL/
몇 가지 예를 살펴보십시오. https://iamvdo.me/en/blog/advanced-css-filters –