다른 영향을 미치지 않고 흰색 배경을 50 % 투명하게 만들어야합니다. 어떻게합니까?
답변
사용 rgba():
.transparent {
background-color: rgba(255,255,255,0.5);
}상자의 내용물은 계속 100 % 불투명도를 유지하면서 불투명도는 50 %입니다.
를 사용 opacity:0.5하면 배경뿐만 아니라 내용도 흐려집니다. 따라서 사용하지 마십시오.
답변
이것은 작동하지만이 클래스를 가진 요소의 모든 자식도 그것을 막을 수있는 방법없이 투명 해집니다.
.css-class-name {
opacity:0.8;
}답변
투명한 배경을 회색으로 만들려면 pls를 시도하십시오.
.transparent{
background:rgba(1,1,1,0.5);
}답변
알아 둘만 한
일부 웹 브라우저는 투명한 배경 위에 그림자가있는 텍스트를 렌더링하는 데 어려움이 있습니다. 그런 다음 반투명 1×1 PNG 이미지를 배경으로 사용할 수 있습니다.
노트
IE6는 PNG 파일을 지원하지 않습니다.
답변
1×1 반투명 PNG를 사용하지 마십시오. PNG 크기를 최대 10×10, 100×100 등으로 조정하십시오. (200×200 PNG를 사용했으며 0.25kb에 불과하므로 파일 크기에 대한 실제 우려는 없습니다.)
이 게시물을 방문한 후 투명도가 다양한 3, 1×1 PNG로 웹 페이지를 만들었습니다.
Dreamweaver CS5가 탱킹되었습니다. 나는 DOS에 플래시 백을 가지고 있었다! !! 분명히 스크롤하려고 할 때마다 텍스트를 삽입하고 기본적으로 아무것도하지 않으면 DW는 한 번에 1×1 픽셀의 반투명 영역을 다시로드하려고했습니다 … YIKES!
Adobe 기술 지원 부서에서는 문제가 무엇인지 알지 못했지만 파일을 다시 작성하라는 메시지를 받았습니다 (실수로 시스템에서 작동 함). 첫 번째 투명 PNG를 css 파일에로드했을 때만 문서가 다시 깊이 빠져 들었습니다.
그런 다음 다른 도움말 사이트에서 Dreamweaver와 충돌하는 PNG에 대한 게시물을 찾았습니다. PNG 크기를 조정하십시오. 그렇게하는 데 단점이 없습니다.
답변
날짜가 있지만이 스레드에 대한 답변은 보편적으로 사용할 수 없습니다. rgba를 사용하여 투명한 컬러 마스크 만들기-배경 이미지로 만드는 방법을 정확하게 설명하지는 않습니다.
내 솔루션은 배경 이미지 또는 컬러 배경에서 작동합니다.
#parent {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 19px;
text-transform: uppercase;
border-radius: 50%;
margin: 20px auto;
width: 125px;
height: 125px;
background-color: #476172;
background-image: url('https://unsplash.it/200/300/?random');
line-height: 29px;
text-align:center;
}
#content {
color: white;
height: 125px !important;
width: 125px !important;
display: table-cell;
border-radius: 50%;
vertical-align: middle;
background: rgba(0,0,0, .3);
}<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>답변
div.main{
width:100%;
height:550px;
background: url('https://images.unsplash.com/photo-1503135935062-
b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
background-position:center;
background-size:cover
}
div.main>div{
width:100px;
height:320px;
background:transparent;
background-attachment:fixed;
border-top:25px solid orange;
border-left:120px solid orange;
border-bottom:25px solid orange;
border-right:10px solid orange;
margin-left:150px
}
