gpt4 book ai didi

html - CSS: border-radius//插入背景;白 Angular

转载 作者:搜寻专家 更新时间:2023-10-31 23:00:06 27 4
gpt4 key购买 nike

所以我对 HTML/CSS 完全陌生。我现在正在设计一个有趣的元素来学习网络开发。我创建了一个搜索栏,想添加著名的带有 border-radius 的圆 Angular 。到目前为止效果很好。问题是白色背景现在从边缘闪耀,因为搜索栏位于菜单栏中。我将在下面发布屏幕截图和代码。我不是 100% 熟悉 CSS 盒模型。我想这就是问题所在。也许我可以用我的菜单背景图片填补空白?希望有人能指导我在哪里解决这个问题。

截图: https://picload.org/view/prwpirg/bildschirmfoto2015-09-20um16.3.png.html

HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>facefuck</title>
<link rel="stylesheet" href="./css/style.css" type="text/css"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/face_logo.jpg" />
</div>
<div class="search_box">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Put your dick here" />
</form>
</div>
<div id="menu">
<a href="#" />Home</a>
<a href="#" />About</a>
<a href="#" />Sign Up</a>
<a href="#" />Sign In</a>
</div>
</div>
</div>
</body>
</html>

CSS 代码:

* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #EAEDF5;
}
.headerMenu {
background-image: url("../img/menu_bg.png");
height: 60px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url("../img/menu_bg.png");
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url("../img/menu_bg.png");
width: 125px;
}
.logo img {
width: 150px;
height: 100%;
}
.search_box {
position: absolute;
top: 17px;
margin-left: 150px;
}
#search input[type="text"] {
background: url(../img/search_white.png) no-repeat 10px 6px #D8D8D8;
outline: none;
border: 0 none;
border-radius: 100px;
font: bold 12px Arial, Helvetica, Sans-serif;
width:300px;
padding: 5px 15px 5px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_black.png) no-repeat 10px 6pc #fcfcfc;
color: #6a6f75;
width: 300px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
...

最佳答案

这是由于

* {
background-color: #EAEDF5;
}

这将使您的 .search_boxform也有那个背景颜色。您可以使用以下方法覆盖它:

.search_box, form {
background-color: transparent;
}

不过,我建议删除第一条规则,只应用 #EAEDF5 body 的背景颜色而不是所有元素。


用一个具体的例子来形象化:

* {
background-color: gray;
}

#a {
padding: 20px;
background-color: pink;
}

#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}
<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>

在上面的例子中,*选择器将定位所有元素(所有 div 和主体),从而将每个 div 的背景颜色设置为灰色。 id为a的两个div和 c将覆盖此背景颜色,而 b并从 * 获取它应该使用的背景颜色选择器,因此它将具有灰色背景颜色而不是 transparent 的初始值,这会让粉红色闪耀。

要解决此问题,要么强制执行 #b div 有一个透明的背景作品或通过改变 * -选择器到body ,然后它只会为页面的背景颜色着色,而不是为每个元素着色(除非被覆盖)。

在这里查看我推荐的修复方法:

body {
background-color: gray;
}

#a {
padding: 20px;
background-color: pink;
}

#c {
padding: 10px;
background-color: white;
border-radius: 20px;
}
<div id="a">
<div id="b">
<div id="c">
Hello world!
</div>
</div>
</div>

关于html - CSS: border-radius//插入背景;白 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32680622/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com