Question

我编码为了最终实现这个结果（https://pasteboard.co/H2BwMM7.jpg）。 HTML代码是这样的：

<body>

<div>
<div class="box">
     <span class="imgBox"><img src="Chrysanthemum.jpg" class="img-rounded" width="150px" height="150px"/></span>
     <div class="text">
     <h1>mamad</h1>
     <h4>author</h4>
    </div>
    </div>

    <div class="well wellBox" role="alert">

    <div class="text-body">
  <h4>Well done!</h4>

  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
  </div>
</div>
</body>

和css是这样的：

<style>
div.box {
float:right;
top:25px;
  position: relative;
  z-index:3;
right:0;
display:inline-block;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;

}
h1{
margin-top:0px
}
div.box:after,div.wellBox:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 50px;
  background: black;

  top: -20px;

}
div.box:after{
  right: -10px;
}
div.wellBox:after{
left: -10px;
}
div.box:before,div.wellBox:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 50px;
  background: black;

  top: -10px;

}
div.box:before{
right: -20px;
}
div.wellBox:before{
left: -20px;
}
.wellBox{
box-shadow: -10px 10px 8px #888888;
}
.imgBox{
box-shadow: -10px 10px 8px #888888;  z-index:1;    display: inline-block;
    float: right;
}
img{float:right;  z-index:2;}


.wellBox{
width:80%;
margin:0 auto;
position: relative;
top:146px;
text-align:right

}
.text{
float:right;
display:inline;
text-align:right;
margin-right:30px
}
h1,h4{

color:black}

</style>

我最终得到的结果就是这个网址（https://pasteboard.co/H2ByVvW.jpg）。为了获得理想的结果，我需要： 1.输入div到课堂的文本＆＃34; well＆＃34;在哪里标有绿线 2.box-shadow的图像放在div下面＃34; well＆＃34;。 3.移动大小div to class＆＃34; text＆＃34;没有很远的div to class＆＃34; text-body＆＃34;。

我尝试了很多，但是我没有得到一个真正令我高兴的好结果......任何想法？

Answer 1

我认为如果你使用正确的颜色和透明化的box-shadow而不是纯色，你就可以实现这一目标。

Check out this JSFiddle

具体见行55＆amp; 61

重叠元素下方的box-shadow而不是图像附近的浮动文本

1 个答案:

Check out this JSFiddle