배경 이미지 위의 반투명 컬러 레이어?
저는 DIV가 있는데 배경으로 패턴을 넣고 싶습니다.이 패턴은 회색입니다.그래서 조금 더 멋지게 만들기 위해, 저는 옅은 투명한 색상의 "레이어"를 덧씌우고 싶습니다.아래는 제가 시도했지만 효과가 없었던 것입니다.배경 이미지 위에 컬러 레이어를 씌우는 방법이 있습니까?
여기 제 CSS가 있습니다.
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
이것이 정말 오래된 스레드라는 것을 알지만, 구글의 맨 위에 표시됩니다. 그래서 여기 다른 옵션이 있습니다.
이것은 순수한 CSS이며, 별도의 HTML이 필요하지 않습니다.
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
상자 그림자 기능에는 놀랄 만큼 많은 사용법이 있습니다.
여기 있습니다.
.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클래스, 클래스 내부에 다른 요소가 없는 경우
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
이거 먹어봐요.나한테 효과가 있어요.
.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;
}
그런 다음 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%;
}
이미지 색상 프로필을 제어할 수 없을 때 동적 오버레이 텍스트를 쉽게 읽을 수 있도록 이미지에 색상 색조와 그라데이션을 모두 적용하는 방법으로 사용했습니다.당신은 z-index에 대해 걱정할 필요가 없습니다.
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);
}
도움이 되길 바랍니다.
가능한 솔루션에 대한 포괄적인 개요는 https://stackoverflow.com/a/18471979/193494 에서 확인할 수 있습니다.
- 선형 구배가 있는 다중 배경 사용,
- 생성된 PNG가 있는 다중 배경 또는
- 보조 배경 레이어로 작동하도록 :의사 요소 다음에 스타일을 지정합니다.
왜 그렇게 복잡하죠?패턴을 투명하게 만들고 배경색을 단색으로 만드는 방법을 제외하면 솔루션이 거의 옳았습니다.PNG는 투명도를 포함할 수 있습니다.따라서 포토샵을 사용하여 레이어를 70%로 설정하고 이미지를 다시 저장하여 패턴을 투명하게 만드십시오.그러면 선택기가 하나만 필요합니다.브라우저 간에 작동합니다.
CSS:
.background {
background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
background-color: rgb(248, 247, 216);
}
HTML:
<div class="background">
...
</div>
이것이 기본입니다.전환한 위치의 사용 예는 다음과 같습니다.backgroundbackground-image하지만 두 속성 모두 동일하게 작동합니다.
body { margin: 0; }
div {
height: 110px !important;
padding: 1em;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: white;
text-shadow: 0 0 2px #333;
}
.background {
background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
}
.col-one {
background-color: rgb(255, 255, 0);
}
.col-two {
background-color: rgb(0, 255, 255);
}
.col-three {
background-color: rgb(0, 255, 0);
}<div class="background col-one">
1. Background
</div>
<div class="background col-two">
2. Background
</div>
<div class="background col-three">
3. Background
</div> 잠시만 기다려 주십시오! 외부 패턴을 로드하는 데 시간이 좀 걸립니다.
이 웹사이트는 좀 느린 것 같습니다...
여기에 css만 있는 더 간단한 트릭이 있습니다.
<div class="background"> </div>
<style>
.background {
position:relative;
height:50px;
background-color: rgba(248, 247, 216, 0.7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC);
}
.background:after {
content:" ";
background-color:inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);
배경 이미지에 색상 오버레이를 추가하는 방법?에 대한 답변에서 유사 요소나 추가 요소가 필요하지 않은 질문의 중복으로 표시됩니다.
바로 여기에 있고 몇 년 후에도 그 사본은 여전히 누락되어 있습니다.background-blend-mode속성, 현재 널리 구현되어 있습니다(여러 배경 및 삽입된 섀도 예제 아래에 있습니다).
다음은 추가 마크업이나 의사 표시 없이 3가지 쉬운 방법을 제공하는 답변입니다.
처음에는 두 가지 쉬운 옵션을 보았습니다(2016년에는 이 두 가지 옵션도 여기에 나와 있으므로 추가할 새로운 옵션은 없습니다. 이미 bg와 박스섀도에 대한 다른 답변을 읽으신다면 세 번째 옵션에 유의하십시오.).
몇 가지 예시가 없는 오래된 코드펜의 이미지 위에 반투명한 단일 그라데이션이 있는 다중 배경.
그라데이션 오버레이와 거의 같은 기능을 하는 거대한 삽입 그림자
여기에 제시된 예는 다음과 같습니다.
그라데이션 옵션:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
는 CSS 그디트같표시다니로 됩니다.
<gradient>유형,인 이터유유, 특수형<image>두 가지 이상의 색상 사이의 점진적인 전환으로 제작되었습니다.그라데이션 할 수 선형("Linear"로됨)linear-gradient()방사형), 방형사(성생수)radial-gradient()및 )conic-gradient()함수)를 선택합니다.또한 반복 그레이디언트를 생성할 수 있습니다.repeating-linear-gradient(),repeating-radial-gradient(),그리고.repeating-conic-gradient()기능들.그라데이션은 사용할 위치에 상관없이 사용할 수 있습니다.
<image>예를 들어 배경과 같은.그라데이션은 동적으로 생성되므로 유사한 효과를 얻기 위해 기존에 사용되었던 래스터 이미지 파일이 필요하지 않을 수 있습니다.또한 그라데이션은 브라우저에서 생성되므로 확대할 때 래스터 이미지보다 보기 좋으며 즉시 크기를 조정할 수 있습니다.
html {
min-height:100%;
background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/100/2500/1656);
background-size:cover;
}섀도 옵션:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
그
box-shadowCSS 속성은 요소의 프레임 주위에 그림자 효과를 추가합니다.여러 효과를 쉼표로 구분하여 설정할 수 있습니다.상자 그림자는 요소, 흐림 및 확산 반경 및 색상에 대한 X 및 Y 오프셋으로 설명됩니다.
끼워 넣은
지정되지 않은 경우(기본값) 섀도는 드롭 섀도로 간주됩니다(상자가 내용 위에 올라간 것처럼).inset 키워드가 있으면 섀도가 프레임 안에 있는 것으로 변경됩니다(내용이 상자 안에 있는 것처럼).삽입 그림자는 테두리 안쪽(투명 그림자도 있음), 배경 위, 내용 아래에 그려집니다.
html {
min-height: 100%;
background: url(https://picsum.photos/id/100/2500/1656);
background-size: cover;
box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}몇 가지 예가 없는 나의 오래된 코데펜.
자, 세 번째 옵션은 여기에 없습니다.
그
background-blend-modeCSS 속성은 요소의 배경 이미지가 서로 혼합되고 요소의 배경 색상과 혼합되는 방법을 설정합니다.
html {
min-height: 100%;
background: url(https://picsum.photos/id/100/2500/1656) rgba(255, 0, 150, 0.3);
background-size: cover;
background-blend-mode: multiply;
}물론 프로젝트에 따라 사용되는 CSS 라이브러리와 이미 가지고 있는 몇 가지 옵션에 따라 이를 위한 다른 가치 있는 방법도 있습니다.거의 단일 방법/방법은 없지만 다른 방법이 있습니다.중요한 것은 당신의 요구에 가장 효과적으로 맞는 옵션, 당신이 이해하는/마스터하는 방법, 브라우저의 특정성, 이미 사용되고 있는 자바스크립트나 이미 그 작업을 할 수 있는/실행할 수 있는 서버 측 기능이 있다면 그것을 사용하는 것입니다.바퀴는 바퀴입니다.
예를 들어 base64에서도 생성할 수 있는 반투명 픽셀을 사용할 수 있습니다. 흰색이 50%인 예는 다음과 같습니다.
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;
업로드하지 않고
추가 html 없이
적재 속도가 상자 모양 또는 선형 경사도보다 빨라야 할 것 같습니다.
SVG를 인라인 오버레이 이미지로 사용하는 다른 이미지(참고: 사용하는 경우)#svg-code 안에서 당신은 그것을 URL 인코딩해야 합니다.
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
no-repeat center center/cover,
url('overlayed-image.jpg') no-repeat center center/cover;
저는 단순히 대상 배경 div의 배경 이미지 CSS 속성을 사용했습니다.
참고배경-이미지는 그라데이션 색상 기능만 사용할 수 있습니다.
그래서 원하는 동일한 오버레이 색상을 두 번 추가하는 선형 그라데이션을 사용했습니다(색상 불투명도를 제어하려면 마지막 rgba 값 사용).
또한 다음과 같은 두 가지 유용한 리소스를 찾아보십시오.
HTML
<div class="header_div">
</div>
<div class="header_text">
<h1>Header Text</h1>
</div>
CSS
.header_div {
position: relative;
text-align: cover;
min-height: 90vh;
margin-top: 5vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
filter: blur(2px);
}
.header_text {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
저는 실은제가사를 했습니다.:before 방식으로 요소입니다.<div>하나의 CSS 클래스 이름만 사용하고 유사 요소 트릭을 사용합니다.
.background {
/* ↓↓↓ the decorative CSS */
font-family: tahoma;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-radius: 8px;
overflow: hidden;
/* ↓↓↓ the main CSS */
position: relative;
background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover;
z-index: 1;
}
.background:before {
/* ↓↓↓ the main CSS */
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.5);
z-index: -1;
}
.text {
/* ↓↓↓ the decorative CSS */
font-size: 20px;
color: #072252;
}<div class="background">
<span class="text">Some child</span>
<span class="text"></span>
</div>오버레이 색상에 불투명도를 추가할 수도 있습니다.
하는 대신에
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
할 수 있는 일:
background: url('../img/bg/diagonalnoise.png');
그런 다음 불투명도 색상에 대한 새 스타일을 만듭니다.
.colorStyle{
background-color: rgba(248, 247, 216, 0.7);
opacity: 0.8;
}
불투명도를 1 이하의 원하는 숫자로 변경합니다.그런 다음 이 색상 스타일을 이미지와 같은 크기로 만듭니다.그건 작동할 거야.
#img-div{
height: 100vh;
background-image: url("https://images.pexels.com/photos/46160/field-clouds-sky-earth-46160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#overlay-div{
background-color: rgba(0, 0, 0, 0.5);
height: 100vh;
position: relative;
}<div id="img-div">
<div id="overlay-div"></div>
</div>유사 클래스 앞에 사용 및 불투명도 사용
.left-side {
position: relative;
background-color: #5200ff; /*bg color*/
}
.left-side::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(./images/img.jpeg); /*bg image*/
background-size: cover;
background-position: 100%;
opacity: 0.22; /*use opacity to show bg color */
}
언급URL : https://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image
'source' 카테고리의 다른 글
| 전체 화면을 채우시겠습니까? (0) | 2023.08.30 |
|---|---|
| 컴파일 시 GCC의 현재 버전을 어떻게 테스트합니까? (0) | 2023.08.30 |
| 명령줄 스크립트를 통해 연결된 모든 장치의 장치 UUID를 어떻게 찾을 수 있습니까? (0) | 2023.08.30 |
| Mysql 오류 구분 기호: 줄 구분 기호에 오류가 있습니다. (0) | 2023.08.30 |
| offsetTop 대 jQuery.offset().top (0) | 2023.08.30 |