我有一个JPEG文件,我正在使用它作为搜索页面的背景图像,我正在使用CSS来设置它,因为我在Backbone.js上下文中工作:
background-image: url("whatever.jpg");
Run Code Online (Sandbox Code Playgroud)
我想一个CSS 3模糊滤镜应用只为背景,但我不知道如何做到这一个元素的风格.如果我尝试:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
Run Code Online (Sandbox Code Playgroud)
就background-image在我的CSS 下面,它调整整个页面的样式,而不仅仅是背景.有没有办法只选择图像并应用过滤器?或者,有没有办法只为页面上的每个其他元素关闭模糊?
我正在尝试使用Bootstrap 4将我的Container放在页面中间.
以下是我的代码,我想了解为什么 #firstDiv被所有浏览器推倒.我真的想要理解这样一个事实的内在运作,即它被推向下而不是以某种方式向上拉.(我知道如何调整他们的上衣:))
而且我知道它的溢出:隐藏了导致它,但不确定为什么它推动该div向下.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}Run Code Online (Sandbox Code Playgroud)
我试图<div>在CSS中设置一个特定的百分比高度,但它只是保持与其中的内容相同的大小.<!DOCTYTPE html>但是,当我删除HTML 5 时,它可以工作,根据<div>需要占用整个页面.我希望页面验证,所以我该怎么办?
我有这个CSS <div>,其ID为page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
Run Code Online (Sandbox Code Playgroud) 你能解释一下这两个CSS类语法之间的区别吗:
.element .symbol {}
Run Code Online (Sandbox Code Playgroud)
和
.element.large .symbol {}
Run Code Online (Sandbox Code Playgroud)
我不明白两者之间的区别.第一行表示应用相同样式的两个不同类.但是关于第二个问题,".great"的含义是什么?附加在'.element'上的'.large'是什么意思?
我的css边距不符合我想要或期望的方式.我好像我的标题margin-top会影响它周围的div-tags.
这就是我想要和期望的:

......但这就是我最终的结果:

资源:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我在这个例子中夸大了边缘.h1-tag上的默认浏览器边距略小,在我的情况下,我使用Twitter Bootstrap,使用Normalizer.css将默认边距设置为10px.不重要,重点是; 我不能,不应该,不想改变h1标签上的边距.
我想这跟我的其他问题类似; 为什么这种CSS margin-top风格不起作用?.问题是我该如何解决这个具体问题?
我已经阅读了类似问题的几个主题,但没有找到任何真正的答案和解决方案.我知道添加padding:1px;或border:1px;解决问题.但这只会增加新的问题,因为我不希望在div标签上有填充或边框.
必须有更好的最佳实践解决方案吗?这一定很常见.
是否可以在锚标记上设置像素的宽度和高度?我想让锚标签有一个背景图像,同时保留锚内的文本.
li {
width: 32px;
height: 32px;
background-color: orange;
}
li a {
width: 32px;
height: 32px;
background-color: red;
}Run Code Online (Sandbox Code Playgroud)
<li><a href="#">Something</a></li>Run Code Online (Sandbox Code Playgroud)
有没有办法在css3中声明一个框的大小/部分边框?例如,一个350px的盒子,在第一个60px中只显示一个边框底部.我认为这可能非常有用.
例子:

我只是无法设置a导航元素的高度和宽度.
#header div#snav div a{
width:150px;
height:77px;
}
#header div#snav div a:link{
width:150px;
height:77px;
}
#header div#snav div a:hover{
height:77px;
background:#eff1de;
}
Run Code Online (Sandbox Code Playgroud)
我有什么想法我做错了吗?
为什么两个堆叠的半透明盒子的最终颜色取决于订单?
我怎么能这样做才能在两种情况下得到相同的颜色?
.a {
background-color: rgba(255, 0, 0, 0.5)
}
.b {
background-color: rgba(0, 0, 255, 0.5)
}Run Code Online (Sandbox Code Playgroud)
<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>Run Code Online (Sandbox Code Playgroud)
css ×10
html ×6
overflow ×2
background ×1
bootstrap-4 ×1
border ×1
css-filters ×1
flexbox ×1
height ×1
margin ×1
overlapping ×1