blocks|key|408543|text|我来晚了，但如果你想只使用CSS来处理任意元素，而不是摆弄位置、覆盖div等，你可以使用一个插入框阴影：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|408544|box-shadow:+inset+0px+0px+0+2000px+rgba(0,0,0,0.5);|code-block|syntax|javascript|408545|这将适用于任何长度或宽度小于4000像素的元素。|408546|示例：http://jsfiddle.net/jTwPc/|offset|length|408547|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jTwPc/^0|0|0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I'm late to the party, but if you want to do this to an arbitrary element using only CSS, without messing around with positioning, overlay divs etc., you can use an inset box shadow:</p>

<pre><code>box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
</code></pre>

<p>This will work on any element smaller than 4000 pixels long or wide.</p>

<p>example: <a href="http://jsfiddle.net/jTwPc/">http://jsfiddle.net/jTwPc/</a></p>


blocks|key|623710|text|http://jsfiddle.net/55LNG/1/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|623711|CSS：|623712|#box{
++++border:1px+solid+black;
++++position:relative;
}
#overlay{
++++position:absolute;
++++top:0px;
++++left:0px;
++++bottom:0px;
++++right:0px;
++++background-color:rgba(255,255,0,0.5);
}|code-block|syntax|javascript|623713|entityMap|0|LINK|mutability|MUTABLE|url^0|0|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<p><a href="http://jsfiddle.net/55LNG/1/" rel="noreferrer">http://jsfiddle.net/55LNG/1/</a></p>

<p>CSS:</p>

<pre><code>#box{
    border:1px solid black;
    position:relative;
}
#overlay{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(255,255,0,0.5);
}
</code></pre>


blocks|key|623620|text|不看当前HTML和CSS示例的快速答案是使用z-index|type|unstyled|depth|inlineStyleRanges|entityRanges|data|623621|css：|623622|#div1+{
position:+relative;
z-index:+1;
}

#div2+{
position:+relative;
z-index:+2;
}|code-block|syntax|javascript|623623|其中，div2是叠加|623624|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Quick answer without seeing examples of your current HTML and CSS is to use z-index</p>

<p>css:</p>

<pre><code>#div1 {
position: relative;
z-index: 1;
}

#div2 {
position: relative;
z-index: 2;
}
</code></pre>

<p>Where div2 is the overlay</p>


blocks|key|408487|text|我建议使用css属性来做到这一点。您可以使用position:absolute将一个元素放置在另一个元素的顶部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|408488|例如：|408489|<div+id="container">
+++<div+id="on-top">Top!</div>
+++<div+id="on-bottom">Bottom!</div>
</div>|code-block|syntax|javascript|408490|和css|408491|#container+{position:relative;}
#on-top+{position:absolute;+z-index:5;}
#on-bottom+{position:absolute;+z-index:4;}|408492|我想看看这里的建议：http://www.w3schools.com/cssref/pr_class_position.asp|offset|length|408493|最后，这里是一个jsfiddle，向您展示我的示例|408494|http://jsfiddle.net/Wgfw6/|408495|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/pr_class_position.asp|1^0|0|0|0|0|0|A|1H|0|0|0|0|Q|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|18|8|@]|9|@$O|19|P|1A|1|1B]]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1D|8|@]|9|@$O|1E|P|1F|1|1G]]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|T]]]]

<p>I would suggest using css attributes to do this. You can use position:absolute to position an element on top of another.</p>

<p>For example:</p>

<pre><code>&lt;div id="container"&gt;
   &lt;div id="on-top"&gt;Top!&lt;/div&gt;
   &lt;div id="on-bottom"&gt;Bottom!&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and css</p>

<pre><code>#container {position:relative;}
#on-top {position:absolute; z-index:5;}
#on-bottom {position:absolute; z-index:4;}
</code></pre>

<p>I would take a look at this for advice:
<a href="http://www.w3schools.com/cssref/pr_class_position.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_class_position.asp</a></p>

<p>And finally here is a jsfiddle to show you my example</p>

<p><a href="http://jsfiddle.net/Wgfw6/" rel="nofollow">http://jsfiddle.net/Wgfw6/</a></p>


blocks|key|623811|text|如果您不介意使用z-index，但又希望避免为覆盖添加额外的div，则可以使用以下方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|623812|/*+make+sure+::before+is+positioned+relative+to+.foo+*/
.foo+{+position:+relative;+}

/*+overlay+*/
.foo::before+{
++++content:+'';
++++display:+block;
++++position:+absolute;
++++top:+0;
++++left:+0;
++++width:+100%25;
++++height:+100%25;
++++background:+rgba(0,0,0,0.5);
++++z-index:+0;
}
/*+make+sure+all+elements+inside+.foo+placed+above+overlay+element+*/
.foo+>+*+{+z-index:+1;+}|code-block|syntax|javascript|623813|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you don't mind messing with z-index, but you want to avoid adding extra div for overlay, you can use the following approach</p>

<pre><code>/* make sure ::before is positioned relative to .foo */
.foo { position: relative; }

/* overlay */
.foo::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
/* make sure all elements inside .foo placed above overlay element */
.foo &gt; * { z-index: 1; }
</code></pre>


blocks|key|623911|text|这是一个使用伪元素的覆盖图(例如:不需要添加更多的标记)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|623912|​|623913|.box+{
++background:+0+0+url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
++width:+300px;
++height:+200px;
}

.box:after+{
++content:+"";
++display:+block;
++width:+100%25;
++height:+100%25;
++background:+rgba(0,+0,+0,+0.4);
}|code-block|syntax|javascript|623914|++<div+class="box"></div>|623915|623916|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Here is an overlay using a pseudo-element (eg: no need to add more markup to do it)</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
  background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  width: 300px;
  height: 200px;
}

.box:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="box"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|408791|text|我只是在codepen上处理了一个类似的问题，这就是我用一个简单的css标记创建一个覆盖图的过程。我创建了一个div元素，并对其应用了类.box。在这个div中，我创建了两个div，一个应用了.inner类，另一个应用了.notext类。.box+div中的这两个类最初都设置为display:none，但当将鼠标悬停在.box上时，这些类将变为可见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|408792|​|408793|.box{
++height:450px;
++width:450px;
++border:1px+solid+black;
++margin-top:50px;
++display:inline-block;
++margin-left:50px;
++transition:+width+2s,+height+2s;
++position:relative;
++text-align:+center;
++++background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG');
++background-size:cover;
++background-position:center;
++
}
.box:hover{
++width:490px;
++height:490px;
}
.inner{
++border:1px+solid+red;
++position:relative;
++width:100%25;
++height:100%25;
++top:0px;
++left:0px;
++display:none;+
++color:white;
++font-size:xx-large;
++z-index:10;
}
.box:hover+>+.inner{
++display:inline-block;
}
.notext{
++height:30px;
++width:30px;
++border:1px+solid+blue;
++position:absolute;
++top:0px;
++left:0px;
++width:100%25;
++height:100%25;
++display:none;
}
.box:hover+>+.notext{
++background-color:black;
++opacity:0.5;
++display:inline-block;
}|code-block|syntax|javascript|408794|<div+class="box">
++<div+class="inner">
++++<p>Panda!</p>
++</div>
++<div+class="notext"></div>
</div>|408795|408796|希望这能有所帮助！:)欢迎任何建议。|408797|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I was just playing around with a similar problem on codepen, this is what I did to create an overlay using a simple css markup. I created a div element with class .box applied to it. Inside this div I created two divs, one with .inner class applied to it and the other with .notext class applied to it. Both of these classes inside the .box div are initially set to display:none but when the .box is hovered over, these are made visible. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
  height:450px;
  width:450px;
  border:1px solid black;
  margin-top:50px;
  display:inline-block;
  margin-left:50px;
  transition: width 2s, height 2s;
  position:relative;
  text-align: center;
    background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG');
  background-size:cover;
  background-position:center;
  
}
.box:hover{
  width:490px;
  height:490px;
}
.inner{
  border:1px solid red;
  position:relative;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  display:none; 
  color:white;
  font-size:xx-large;
  z-index:10;
}
.box:hover &gt; .inner{
  display:inline-block;
}
.notext{
  height:30px;
  width:30px;
  border:1px solid blue;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:none;
}
.box:hover &gt; .notext{
  background-color:black;
  opacity:0.5;
  display:inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  &lt;div class="inner"&gt;
    &lt;p&gt;Panda!&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="notext"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Hope this helps! :) Any suggestions are welcome.</p>


blocks|key|408817|text|+++++++++div{
+++++++++background-image:url('');
+++++++++background-size:cover;
+++++++++background-position:top+center;
+++++++++position:relative;
+++++++++}

+++++++++div:before{
+++++++++content:'';
+++++++++position:absolute;
+++++++++left:0;
+++++++++top:0;
+++++++++height:100%25;
+++++++++width:100%25;
+++++++++background-color:rgba(0,0,0,0.7);
+++++++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|408818|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>         div{
         background-image:url('');
         background-size:cover;
         background-position:top center;
         position:relative;
         }

         div:before{
         content:'';
         position:absolute;
         left:0;
         top:0;
         height:100%;
         width:100%;
         background-color:rgba(0,0,0,0.7);
         }
</code></pre>


<p>I'd like to create a div with an arbitrary size, then display something on top of that div. What is the best way to position and size the overlay exactly as the div below in css?</p>


How can one create an overlay in css?

我想创建一个任意大小的div，然后在该div上显示一些内容。在css中准确定位覆盖图和调整覆盖图大小的最佳方法是什么？

问如何在css中创建覆盖？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中创建覆盖？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中创建覆盖？
EN