小编use*_*698的帖子

我正在尝试CSS过滤器,但它在我的Firefox(15.0)浏览器中不起作用.

HTML:

<div class="google">
     <img src="https://www.google.com/images/srpr/logo3w.png">
</div>

CSS:

.google{   
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

演示:http: //jsfiddle.net/xDJzU/

我有一个在页面上具有绝对位置的div,在滚动时与另一个div重叠.我想在滚动到特定div时使其不可见.

为此,我正在使用z-index.我正在设置z-index我想隐藏的div 的1,而z-index另一个div的设置要高得多.但它并没有隐藏div.如果我将其设置z-index为-1然后它隐藏,但然后该div上的链接不再可点击.我怎样才能解决这个问题？

这是我的代码:

HTML:

<div class="wrap">
    <div class="up"><div class="box"><a href="#">Should hide</a></div></div>   
    <div class="down">Should be visible</div>
</div>

CSS:

.wrap{
    width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;

}
.up{
    height: 100px;   
}

.box{
    position: absolute;
    top: 20px;
    background: yellow;
    width: 100px;
    height: 100px;
    z-index: -1; 
}

.down{
    background: green;
    overflow: hidden;
    z-index: 200;
    height: 400px;
}

所以上面例子中的问题是.box中的链接不可点击(因为-ve z-index值),如果我将它设置为正数,它就不会隐藏在.down之后.

JSFiddle: http ://jsfiddle.net/G2xRA/

我想从选择框中删除默认箭头,并希望使用自定义图标.从之前对SO的回答中,我发现它是不可能的(使其适用于主流浏览器).唯一的可能性是将select包装在div中,并将其宽度设置为大于div宽度并设置overflow:hidden.我正在尝试跟随,但它不起作用.我做错了什么？

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 30px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}

<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>

JSFiddle: http ://jsfiddle.net/gcPmC/

我正在使用以下代码在悬停时显示隐藏的div.我正在使用CSS transition属性淡入隐藏的div.是否可以在隐藏(例如从左到右)div中滑动而不是仅使用CSS淡入？这是我的代码:

HTML

<div class="box">
    <a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
    <div class="hidden"></div>
</div>

CSS

.box{
    position: relative;    
}

.box .hidden{    
   background: yellow;
    height: 300px;    
    position: absolute;
    top: 0;
    left: 0;    
    width: 500px;
    opacity: 0;    
    transition: all 1s ease;
}

.box:hover .hidden{
    opacity: 1;
}

演示: http ://jsfiddle.net/u2FKM/

是否可以在不支持javascript或任何服务器端脚本的网站上使用Google Analytics代码？(例如,网站上允许仅使用HTML的配置文件页面).

我发现通过直接调用跟踪图像并使用它发送一些数据,可以在不使用javascript的情况下使用分析代码.我还发现了一些链接,但他们也使用服务器端代码.

我想在中间显示一个带有单词的水平线,使其如下所示:

我正在尝试这个并不起作用:

HTML:

<h2><span>Test</span></h2>

CSS:

h2{
    font-size: 100px;
    border-top: solid 1px black;
    width: 100%;
    height: 50px;
    margin-top: 25px;
    top: 50%;
    z-index: 1;    
}

span{
     background: #fff;
      padding: 0 20px;
      margin-top:-25px;
       display: inline-block;
       z-index: 5;
}

JSFiddle: http ://jsfiddle.net/2ds9a/

我为div设置了一个CSS属性table-cell.我还指定了div的宽度并设置了隐藏的溢出,但由于table-cell属性,div不关心宽度.如果我放置任何大图像,它会超出宽度.如何使用表格单元格并使用固定宽度的div？

.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    width: 400px;
}

在以下代码中，我只想为li（而不是文本）的背景色设置不透明度。但是，请勿将用作rgba背景，这一点很重要。

我正在尝试跟踪，但是它也为链接文本设置了不透明度。

HTML：

<ul>
    <li><a href="#">Hello World</a></li>
</ul>

CSS：

body{
    background: red;
}

ul{
    margin: 100px;
}

li{
    padding: 10px;
    background: #000000;
    opacity: 0.1;
}

a{
    color: #fff;
    font-weight: 700;
    opacity: 1;  
}

JSFiddle： http : //jsfiddle.net/2uJhL/

媒体查询中指定的宽度是否表示隐藏屏幕的大小,或者它是移动设备中浏览器的内部宽度.

如果我指定与min-width媒体查询中定义的元素宽度相同的元素宽度,是否会在某个点出现水平滚动条？

例如:

@media screen and (min-width: 460px) and (max-width: 800px){

    .wrapper{
        width: 460px;
    }
}

如果这不正确,.wrapper为了避免滚动条,最大宽度应该是多少？

由于div的固定宽度,我在一个div中有一个H1超过1行.我想仅将背景颜色设置为H1文本,以便背景仅保留在文本后面(例如,如果行的末尾有空白空间,则不应使用背景颜色).

另外,我需要设置左右填充文本.我试图将填充设置为标题但它也不起作用.

这是我想要得到的:

我试图通过设置inlineH1 的显示和设置背景颜色来实现这一点,但它似乎不起作用.以下是我的HTML和CSS以及演示.

HTML:

<div class="box">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget massa felis, at aliquam libero. </h1>

CSS:

.box{
    background: green;
    overflow: hidden;
    max-width: 100px;
    margin: 50px auto;
    padding: 20px;
}

h1{   
    background: yellow;
    font-size: 30px;   
    float: left;
    display: inline;   
}

演示:http://jsfiddle.net/BQMXa/