如何在div设置Overflow=visible时给予不透明度

Question

如何在div设置Overflow=visible时给予不透明度

javascriptjqueryhtmlcss

7

我有一个

和标签，一个在另一个上面。

比小。我已经为

设置了overflow=visible。我的问题是，当我将图像插入到image标签中时，通过

溢出的内容应该像这样。

对我来说它显示如下.. 请帮帮我

<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative;  overflow: visible;" id="divimg">
  <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>

- Anoop B.K

如果我将其设置为隐藏，它将被隐藏，但我希望它可见，并且可见内容应该是不透明的。 - Anoop B.K

不像裁剪，我是拖动和调整大小的，但无论如何，可见性应该像那张图片一样透明 :) - Anoop B.K

2

就像这个例子一样，只需看功能即可！ - Guruprasad J Rao

这很好，但如何在这里实现？ - Anoop B.K

那么确切的要求是什么？您是上传图像还是它将一直存在？ - Guruprasad J Rao

显示剩余4条评论

3个回答

1

这是我想出来的：

<div class="container">
    <div class="main">
        <div class="sub">This is a text</div>
    </div>
</div>


.main {
    background-image:url(http://lorempixel.com/g/200/200/);
    position: relative;
}
.container {
    width:300px;
    height:300px;
}
.sub {
    text-align: center;
    padding:15px;
    border: solid 30px rgba(255, 255, 255, 0.5);
    color:white;
}

这里是JSFiddle演示

- Ahs N

我想要它作为源，并且我正在重新调整它的大小。 - Anoop B.K

关于 src？你能否提供更多细节？ - Ahs N

我正在使用图像标签，我想将图像添加到图像标签的src中 :( - Anoop B.K

上述示例使用边框宽度和边框颜色来实现该效果。父div具有图像作为背景图像，子div使用边框覆盖该区域。由于边框是透明的，因此它会产生该效果。在您的情况下，img标记不能具有子元素，因此我认为无法使用img标记完成这个效果:( - Ahs N

是的，兄弟 :( 我无法在图像内添加div，不管怎样还是谢谢你。 - Anoop B.K

1

这里是符合您要求的演示。

.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}

 <div class="outter_div">
       <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>

JSFiddle演示

- Sa Si Kumar

这很好，但使用绝对定位会使您无法将其放置在网页上任何您喜欢的位置，是吗？ :/ - Ahs N

是的，我正在尝试将其应用于面板，这样它就会固定，因为我正在拖动和调整我的图像 :) ，谢谢，让我试试.. - Anoop B.K

我们可以像普通的div一样在任何地方使用它。我只为内部div使用了绝对定位，这样就不会影响默认图像定位。 - Sa Si Kumar

@Sasikumar，我能把class=outerdiv添加到panel中吗？这样做会影响outer_div:after吗？ - Anoop B.K

如果您想替换outer_div类，您应该在outer_div:after选择器中更改类名。 - Sa Si Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sinisake · Accepted Answer

如果您可以将HTML更改为以下内容：

<div id="holder">
  <div id="overlay">          
  <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg"  />

    </div>    
    <div id="box"></box>  

</div>

CSS:

#holder {
    width:500px;
    height:250px;
    position:relative;
    overflow:hidden;

}

#overlay {
    width:500px;
    height:250px;
    opacity:0.5;

}
#displayimg {

    width:500px;
    height:250px;

}
#box {
    width:250px;
    height:100px;
    background-color:black;
     position:absolute;
    left:200px;
    top:70px;
    overflow:hidden;

}
#box #ima {

    position:absolute;
     width:500px;
    height:250px;
    display:block;
}

再加上一点jQuery的魔力：

$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima"  /> ');

$('#ima').offset($('#holder').offset());

$( "#box" ).draggable();

  $( "#box" ).draggable({

      drag: function() {
      $('#ima').offset($('#holder').offset());
      }

    });

由于您提到了拖动，我已在fiddle中导入了JQuery UI: http://jsfiddle.net/y3c41d10/1/

对于调整大小，您将需要进行一些计算，但是这是可以做到的，希望能够帮助您...