html 투명하게 CSS3 불투명도-배경 만




백그라운드 rgb (2)

내 탐색 배경색의 불투명도를 변경하고 싶었지만 내 탐색 링크의 불투명도도 변경되었습니다. 내 내비게이션 배경색 만 불투명도로 변경하려면 어떻게해야합니까?

내 탐색을위한 제 스타일입니다.

#navigation { 
    height: 60px;
    width: auto;
    margin: 0 0 20px 0;
    background-color: black;
    border-radius: 8px;
    opacity: 0.7;
}

#navigation ul {
    list-style-type: none;
}

#navigation li {
    padding-left: 22px;
    float: left;
}

#navigation a {
    text-decoration: none;
    display: inline-block;
    float: left;
    padding: 10px 20px 10px 20px;
    color: white;
    margin-top: 10px;
    opacity: 1;
}

#navigation a:hover {
    background-color: orange;
    border-radius: 10px;
}

다음과 같이 할 수 있습니다.

background-color: rgba(0,0,0,0.7);

이 설정은 검은 불투명도의 배경색을 0.7로 변경합니다.


이 색을 사용하여 :

background-color: rgba (0, 0, 0, .5); // black 

이렇게하면 실제 색상의 50 %가됩니다!

알파 오브젝트를 필터링하고 실제 색상의 일부를 투명 효과로 제공합니다.





css3