[英]How can I make an element's background transparent?
I cant make the background of some elements transparent for mobile view.我无法使某些元素的背景对移动视图透明。 I'm using React.
我正在使用反应。
I tried to add background-color
and background
with value transparent
to nearly every class, but it does not remove the background properly.我尝试为几乎每个 class 添加具有
transparent
值background-color
和background
,但它没有正确删除背景。 Does anyone have suggestions how to fix this?有没有人有建议如何解决这个问题?
js: js:
export const NavBar = () => {
return (
<nav className="flex custom-nav">
<ul className="nav-list flex">
<li><a href="#">Home</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Projects</a></li>
</ul>
<span className="social-icon-list">
<a href="#"><img className="social-icon" src={socialIcon1}
alt=""/></a>
<a href="#"><img className="social-icon" src={socialIcon2}
alt=""/></a>
</span>
<button>Let's Connect</button>
</nav>
);
}
css for my js file我的js文件的css
* {
font-family: Centra, sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none !important;
color: #fff !important;
font-weight: 400;
opacity: 0.85;
}
.flex {
display: flex;
gap: 1.5rem;
}
nav {
padding: 20px 50px 0 0;
justify-content: end;
align-items: center;
}
.nav-list {
list-style-type: none;
font-size: 1.5em;
align-items: center;
margin-top: auto;
padding: 0;
background-color: transparent;
}
button {
background-color: transparent;
border: 1px solid #fff;
padding: 18px 34px;
font-size: 1.3em !important;
flex-shrink: 0;
color: #fff;
opacity: 0.85;
}
.social-icon-list {
flex-shrink: 0;
}
.social-icon {
width: 42px;
border-radius: 50% !important;
margin-right: 6px;
background-color: white;
opacity: 0.85;
}
@media (max-width: 44em) {
.custom-nav {
position: fixed;
inset: 0 0 0 30%;
background: aqua;
flex-direction: column;
justify-content: start;
align-items: center;
padding: 0;
margin: 0;
}
.nav-list {
flex-direction: column;
padding: min(25vh, 5rem) 0 0 0;
margin: 0;
gap: 1rem;
}
button {
margin: 0;
}
}
css for the whole app整个应用程序的 css
* {
background-color: #262626;
}
Your problem is in here:你的问题在这里:
* {
background-color: #262626;
}
This sets the background color of absolutely everything , so you'd have to overwrite it for absolutely everything .这将设置绝对所有内容的背景颜色,因此您必须为绝对所有内容覆盖它。
If you want a "global" background, only set that on your root element.如果你想要一个“全局”背景,只在你的根元素上设置它。 Generally,
html
or body
are excellent containers for that:一般来说,
html
或body
是很好的容器:
body {
background-color: #262626;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.