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工作不透明，但按钮有不透明度，我不想

回答

相关问题