Question

我写了一些HTML和CSS代码。这是我的HTML代码：

<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。请帮忙！

Answer 1

如果您在父级上设置opacity，则子级将继承它。我认为你在opacity上设置了ul因为你希望背景颜色是半透明的吗？如果是，请使用rgba(0,255,255,0.5)获得50％不透明度aqua，然后无需在子项上指定opacity。

＆＃13;

/*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;
}

＆＃13;

<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>

＆＃13;

Answer 2

设置元素的不透明度时，会影响其所有子元素，并且无法覆盖它。相反，请尝试设置ul：

背景的不透明度

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

Answer 3

子项将继承不透明度，因此要么将其设置在父项的背景上，要么在父项的背景上设置后，将其显式设置为子项恢复正常。这仅适用于您订购代码以使子代设置在父

之后

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

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

ul工作的不透明度，但按钮有不透明度，我不想要

4 个答案: