나는 DIV를 가지고 있으며 배경으로 패턴을 넣고 싶습니다. 이 패턴은 회색입니다. 좀 더 멋지게 만들기 위해, 나는 “투명한”투명 컬러를 겹쳐 놓고 싶습니다. 아래는 내가 시도했지만 작동하지 않는 것입니다. 배경 이미지 위에 컬러 레이어를 넣는 방법이 있습니까?
내 CSS는 다음과 같습니다.
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
답변
여기있어:
.background {
background:url('../img/bg/diagonalnoise.png');
position: relative;
}
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
이를위한 HTML :
<div class="background">
<div class="layer">
</div>
</div>
물론 .background
그 안에 다른 요소가 없다면 클래스 의 너비와 높이를 정의해야 합니다.
답변
나는 이것이 실제로 오래된 스레드라는 것을 알고 있지만 Google 상단에 표시되므로 다른 옵션이 있습니다.
이것은 순수한 CSS이며 추가 HTML이 필요하지 않습니다.
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
상자 그림자 기능에는 놀라운 용도가 있습니다.
답변
CSS-Tricks에서 … z 인덱싱 및 의사 요소 추가 없이이 작업을 수행하는 한 단계 방법이 있습니다-CSS3 지원이 필요하다는 선형 그라데이션이 필요합니다.
.tinted-image {
background-image:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* your image */
url(image.jpg);
}
답변
선형 그라디언트 및 이미지를 사용할 수도 있습니다.
http://codepen.io/anon/pen/RPweox
.background{
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
url('http://www.imageurl.com');
}
선형 그라디언트 기능이 배경 스택에 추가 된 이미지를 생성하기 때문입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
답변
그런 다음 bg 이미지가 포함 된 줄 바꿈 요소와 bg 색상이 포함 된 내용 요소가 필요합니다.
<div id="Wrapper">
<div id="Content">
<!-- content here -->
</div>
</div>
그리고 CSS :
#Wrapper{
background:url(../img/bg/diagonalnoise.png);
width:300px;
height:300px;
}
#Content{
background-color:rgba(248,247,216,0.7);
width:100%;
height:100%;
}
답변
이 시도. 나를 위해 작동합니다.
.background {
background-image: url(images/images.jpg);
display: block;
position: relative;
}
.background::after {
content: "";
background: rgba(45, 88, 35, 0.7);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.background > * {
z-index: 10;
}
답변
이미지 색상 프로파일을 제어 할 수 없을 때 동적 오버레이 텍스트의 스타일을 쉽게 파악할 수 있도록 이미지에 색상 색조와 그라디언트를 모두 적용하는 방법으로이 방법을 사용했습니다. z- 인덱스에 대해 걱정할 필요가 없습니다.
HTML
<div class="background-image"></div>
SASS
.background-image {
background: url('../img/bg/diagonalnoise.png') repeat;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(248, 247, 216, 0.7);
}
}
CSS
.background-image {
background: url('../img/bg/diagonalnoise.png') repeat;
}
.background-image:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(248, 247, 216, 0.7);
}
그것이 도움이되기를 바랍니다.