小编Tem*_*fif的帖子

如何将CSS 3模糊滤镜应用于背景图像

我有一个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 下面,它调整整个页面的样式,而不仅仅是背景.有没有办法只选择图像并应用过滤器?或者,有没有办法只为页面上的每个其他元素关闭模糊?

css background-image css-filters

450
推荐指数
6
解决办法
148万
查看次数

Bootstrap中的垂直对齐中心4

我正在尝试使用Bootstrap 4将我的Container放在页面中间.

html css flexbox twitter-bootstrap bootstrap-4

263
推荐指数
10
解决办法
37万
查看次数

为什么这个内联块元素被推下?

以下是我的代码,我想了解为什么 #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)

http://jsfiddle.net/WGCyu/.

css overflow

232
推荐指数
5
解决办法
14万
查看次数

百分比高度HTML 5/CSS

我试图<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)

html css height

160
推荐指数
5
解决办法
21万
查看次数

CSS类.foo.bar(没有空格)和.foo .bar(带空格)之间有什么区别

可能重复:
CSS中.classA.classB和.classA .classB之间的区别?

你能解释一下这两个CSS类语法之间的区别吗:

.element .symbol {}
Run Code Online (Sandbox Code Playgroud)

.element.large .symbol {}
Run Code Online (Sandbox Code Playgroud)

我不明白两者之间的区别.第一行表示应用相同样式的两个不同类.但是关于第二个问题,".great"的含义是什么?附加在'.element'上的'.large'是什么意思?

css

132
推荐指数
4
解决办法
5万
查看次数

CSS边缘恐怖; 边距在父元素之外添加空格

我的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标签上有填充或边框.

必须有更好的最佳实践解决方案吗?这一定很常见.

html css margin overflow

128
推荐指数
5
解决办法
7万
查看次数

在A标签上设置宽度和高度

是否可以在锚标记上设置像素的宽度和高度?我想让锚标签有一个背景图像,同时保留锚内的文本.

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)

html css cross-browser

124
推荐指数
4
解决办法
14万
查看次数

任何方式声明一个盒子的大小/部分边框?

有没有办法在css3中声明一个框的大小/部分边框?例如,一个350px的盒子,在第一个60px中只显示一个边框底部.我认为这可能非常有用.

例子:

在此输入图像描述 在此输入图像描述

css border

88
推荐指数
3
解决办法
5万
查看次数

如何用css设置:链接高度/宽度?

我只是无法设置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)

我有什么想法我做错了吗?

html css

78
推荐指数
5
解决办法
13万
查看次数

堆叠的半透明盒子的颜色取决于订单?

为什么两个堆叠的半透明盒子的最终颜色取决于订单?

我怎么能这样做才能在两种情况下得到相同的颜色?

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

html css background background-color overlapping

78
推荐指数
4
解决办法
4198
查看次数