ul工作不透明，但按鈕有不透明度，我不想

我寫了一些HTML和CSS代碼。這裏是我的HTML代碼：ul工作不透明，但按鈕有不透明度，我不想

<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale:1.0"> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
</head> 

<body> 
    <a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi" title="Sushi"></a> 
    <nav role="navigation"> 
     <ul> 
      <li><a href="" title="Home" id="home">Home</a></li> 
      <li><a href="" title="About" id="about">About</a></li> 
      <li><a href="" title="Contact Us" id="contactus">Contact Us</a></li> 
     </ul> 
    </nav> 
</body> 

</html>

這裏是我的CSS代碼：

/*CSS Reset*/ 

html, 
body, 
div, 
span, 
applet, 
object, 
iframe, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre, 
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code, 
del, 
dfn, 
em, 
img, 
ins, 
kbd, 
q, 
s, 
samp, 
small, 
strike, 
strong, 
sub, 
sup, 
tt, 
var, 
b, 
u, 
i, 
center, 
dl, 
dt, 
dd, 
ol, 
ul, 
li, 
fieldset, 
form, 
label, 
legend, 
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td, 
article, 
aside, 
canvas, 
details, 
embed, 
figure, 
figcaption, 
footer, 
header, 
hgroup, 
menu, 
nav, 
output, 
ruby, 
section, 
summary, 
time, 
mark, 
audio, 
video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

img#sushi { 
    position: absolute; 
    z-index: 1; 
    top: 6; 
    left: 6; 
} 

nav li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 1em; 
    background-color: aqua; 
} 

nav a { 
    text-decoration: none; 
    color: white; 
    background-color: black; 
    padding: .7em; 
    font-size: 1.2em; 
} 

nav ul { 
    background-color: aqua; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 4em; 
    opacity: .5; 
} 

nav li a#home { 
    position: absolute; 
    top: 6; 
    right: 10; 
    opacity: 1; 
} 

nav li a#contactus { 
    position: absolute; 
    top: 6; 
    right: 110; 
    opacity: 1; 
} 

nav li a#about { 
    position: absolute; 
    top: 6; 
    right: 250; 
    opacity: 1; 
}

我碰到的一個問題。我將UL的不透明度設置爲.5，將按鈕設置爲1.問題是，按鈕仍然是.5。請幫忙！

來源

2017-04-24 Natan Garanto

當您設置一個元素的透明度，這將影響其所有的孩子，它不能被重寫。相反，嘗試設置ul背景的不透明度：

nav ul{ 
    background: rbga(‎0, 255, 255, 0.5); 
    ... 
}

來源

2017-04-24 03:10:28 JCOC611

如果您在父母上設置了opacity，則孩子會繼承它。我猜你在ul上設置了opacity，因爲你希望背景顏色是半透明的？如果是這樣，請使用rgba(0,255,255,0.5)進行50％的不透明度aqua，然後不需要在兒童上指定opacity。

/*CSS Reset*/ 
 

 
html, 
 
body, 
 
div, 
 
span, 
 
applet, 
 
object, 
 
iframe, 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p, 
 
blockquote, 
 
pre, 
 
a, 
 
abbr, 
 
acronym, 
 
address, 
 
big, 
 
cite, 
 
code, 
 
del, 
 
dfn, 
 
em, 
 
img, 
 
ins, 
 
kbd, 
 
q, 
 
s, 
 
samp, 
 
small, 
 
strike, 
 
strong, 
 
sub, 
 
sup, 
 
tt, 
 
var, 
 
b, 
 
u, 
 
i, 
 
center, 
 
dl, 
 
dt, 
 
dd, 
 
ol, 
 
ul, 
 
li, 
 
fieldset, 
 
form, 
 
label, 
 
legend, 
 
table, 
 
caption, 
 
tbody, 
 
tfoot, 
 
thead, 
 
tr, 
 
th, 
 
td, 
 
article, 
 
aside, 
 
canvas, 
 
details, 
 
embed, 
 
figure, 
 
figcaption, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
output, 
 
ruby, 
 
section, 
 
summary, 
 
time, 
 
mark, 
 
audio, 
 
video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 
img#sushi { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 6; 
 
    left: 6; 
 
} 
 

 
nav li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    padding: 1em; 
 
    background-color: aqua; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: black; 
 
    padding: .7em; 
 
    font-size: 1.2em; 
 
} 
 

 
nav ul { 
 
    background-color: rgba(0,255,255,0.5); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 4em; 
 
} 
 

 
nav li a#home { 
 
    position: absolute; 
 
    top: 6; 
 
    right: 10; 
 
} 
 

 
nav li a#contactus { 
 
    position: absolute; 
 
    top: 6; 
 
    right: 110; 
 
} 
 

 
nav li a#about { 
 
    position: absolute; 
 
    top: 6; 
 
    right: 250; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale:1.0"> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi" title="Sushi"></a> 
 
    <nav role="navigation"> 
 
     <ul> 
 
      <li><a href="" title="Home" id="home">Home</a></li> 
 
      <li><a href="" title="About" id="about">About</a></li> 
 
      <li><a href="" title="Contact Us" id="contactus">Contact Us</a></li> 
 
     </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

來源

2017-04-24 03:10:15

\t \t * { 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 
\t \t .wrap { 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .img-wrap, .btn-wrap { 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t } 
 
\t \t .btn-wrap { 
 
\t \t \t width: 100%; 
 
\t \t \t background: rgba(0,0,0,0.5); 
 
\t \t } 
 
\t \t .btn-item { 
 
\t \t \t width: 100px; 
 
\t \t \t list-style: none; 
 
\t \t \t background: #000; 
 
\t \t \t color: #fff; 
 
\t \t } 
 
\t \t .btn-item:hover { 
 
\t \t \t background: #ccc; 
 
\t \t }

\t <div class="wrap"> 
 
\t \t <div class="img-wrap"> 
 
\t \t \t <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/holiday/habo/res/doodle/15.png"> 
 
\t \t </div> 
 
\t \t <ul class="btn-wrap"> 
 
\t \t \t <li class="btn-item">a</li> 
 
\t \t \t <li class="btn-item">b</li> 
 
\t \t \t <li class="btn-item">c</li> 
 
\t \t </ul> 
 
\t </div>

使用背景：RGBA（0,0,0,0.5）;

來源

2017-04-24 03:33:04

孩子們將繼承不透明度，因此要麼將其設置在父級的背景上，要麼在將父級設置爲父級後，將其明確地設置在子級上恢復正常。這隻有在您訂購您的代碼時纔有效，以便孩子被設置在父母之後

來源

2017-04-24 05:10:10 FrontEndDev

ul工作不透明，但按鈕有不透明度，我不想

回答

相關問題