여러 투명한 배경 이미지

내 웹 사이트의 왼쪽 및 오른쪽 테두리 전체에 세로로 반복되는 두 개의 배경 JPEG 이미지가 있습니다.여러 투명한 배경 이미지

여기 내 코드입니다 :

이는 것처럼 보이는 것입니다

.gradients { 
background-image: url("outer-gradient.jpg"), url("outer-gradient-horizontal-flip.jpg"); 
background-position: top left, top right; 
background-repeat: repeat-y; 
} 

<body> 
    <div class="gradients"> 
    <div> website content in here </div> 
    </div> 
</body>

: 나는이 사진과 모두 투명하게 만들 수있는 방법이 필요

left and right background images

CSS 그래디언트를 사용하지 말고 CSS 그래디언트를 사용할 수 없으므로 왼쪽 및 오른쪽 이미지를 원래대로 만드는 데 필요한 색상 복잡성 때문에 사용할 수 없습니다. 이 jpeg에는 CSS 그라디언트가 만들 수있는 것보다 풍부한 그라디언트를위한 수백 가지 색상이 있습니다.

불투명도 div를 앞에 또는 뒤에 추가하여 단일 배경 이미지를 투명하게 만드는 방법을 보았습니다. 두 개의 배경 이미지가있을 때 .gradient div에 어떻게이 작업을 수행합니까?

출처

2016-10-29 Stuffed Marshmallow

이 두 jpeg를 모두 투명하게 만드는 방법이 필요합니다. 당신은 단순히 웹 사이트의 콘텐츠

.gradients { 
 
    position: relative; 
 
    padding: 0 60px;   /* for this demo, push the content off the image */ 
 
} 
 
.gradients::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50px;    /* width of your jpg file */ 
 
    height: 100%; 
 
    background-image: url(http://placehold.it/50/00f); 
 
    background-position: top left; 
 
    background-repeat: repeat-y; 
 
    opacity: 0.5; 
 
    z-index: -1; 
 
} 
 

 
.gradients::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50px;    /* width of your jpg file */ 
 
    height: 100%; 
 
    background-image: url(http://placehold.it/50/f00); 
 
    background-position: top right; 
 
    background-repeat: repeat-y; 
 
    opacity: 0.5; 
 
    z-index: -1; 
 
}

<body> 
 
    <div class="gradients"> 
 
    <div> 
 
     website content in here<br> 
 
     website content in here<br> 
 
     website content in here<br> 
 
     website content in here<br> 
 
     website content in here<br> 
 
     website content in here<br> 
 
    </div> 
 
    </div> 
 
</body>

에 영향을주지 않습니다, 당신은이 같은 의사 요소를 사용할 수 있습니다뿐만 아니라 웹 사이트 콘텐츠에 영향을 것 gradients DIV에 opacity을 줄 수 없기 때문에

출처

2016-10-29 17:39:10 LGSon

감사합니다. 내 문제가 해결 됐어! :) –

당신은 생명의 은인입니다! :) –

나는 몇 가지 방법을 생각할 수 있습니다

이

당신은 별도의 div의에 넣어 주 용기/래퍼 아래이 된 div를 배치해야합니다. 그에 따라 CSS를 배치 할 수 있습니다.
투명도 그라디언트를 허용하는 실제 .png 이미지로 작업 할 수 있습니다.
그라디언트와 원하는 bg- 색이 이미있는 배경 이미지를 하나의 파일로 작업 할 수 있습니다. 그런 다음 배경 반복을 만들 수 있습니다 : repeat-y; and background-size : 포함.

출처

2016-10-29 17:37:48

나는 이것이 무엇을 의미하는지 확실하지 않다 :

이 jpeg에는 CSS 그라디언트가 만들 수있는 것보다 더 풍부한 그라디언트를위한 수백 가지 색상이 있습니다.

Photoshop에서 만들 수있는 경우 그라디언트를 CSS로 만들 수 있습니다. 그라디언트는 정의에 따라 수백 가지 색상으로, 하나에서 다른 색상으로 전환 될 때 (잠재적으로 다른 색상으로) 전환됩니다. 공유 한 스크린 샷은 이며 CSS 그래디언트를 사용하여 확실히 재현 할 수 있습니다.입니다.

그러나이를 배제하도록 요청 했으므로 JPG 대신 24 비트 PNG를 사용하는 것이 좋습니다. 24 비트 PNG에는 알파 투명도 채널이있어 전반적인 투명도와 픽셀 당 투명성을 완벽하게 제어 할 수 있습니다. 이 시점에는 background-transparency 속성이 없으므로 달성하려는 작업은 보유하고있는 HTML 마크 업과 CSS로 수행 할 수 없습니다.나는 당신의 JPG 자산이 없기 때문에 CSS의 그라디언트,

<div class="gradients"></div> 
<div>Website content here</div>

html { height: 100%; } 

body { min-height: 100%; position: relative; margin: 0; } 

.gradients { 
    background-image: url('left.jpg'), url('right.jpg'); 
    background-position: top left, top right; 
    background-repeat: repeat-y; 
    bottom: 0; 
    left: 0; 
    opacity: .5; 
    position: absolute; 
    top: 0; 
    right: 0; 
}

Codepen Link하지만 효과는 동일합니다

세 번째 옵션은 배경 opacity와 빈 DIV하는 것입니다.

출처

2016-10-29 17:47:41

답변

관련 문제