Question

我试图用这样的图像掩盖线条：

example

以下是代码：

<html>
<style>
img {
border-radius:100%;
position:relative;
}
hr {
position:relative;
width:555px;
}
</style>
<body>
<center>
<img src="bat.jpg" width="150px" height="150px" />
<hr>
</center>
</body>
</html>

结果：

screenshoot result

有人可以帮忙吗？

Answer 1

像这样的东西

＆＃13;

div {
  position: relative;
  text-align:center;
}

img {
  border-radius: 100%;
  border:1px solid #000;
  height:150px;
  width:150px;
}

hr {
  position: absolute;
  width: 555px;
  top:50%;
  z-index:-1;
  border-color: #000;
  margin:0;
}

＆＃13;

<div>
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="Image"/>
  <hr>
</div>

＆＃13;

Answer 2

请参阅fiddle

HTML

<center>
<img src="https://imgs-tuts-dragoart-386112.c.cdn77.org/how-to-draw-batman-easy_1_000000011507_5.jpg" width="150px" height="150px" />
<hr>
</center>

CSS

center{position: relative;}

img {
border-radius:100%;
z-index: 1000;
position: relative;
}
hr {
position: absolute;
width: 555px;
top: 50%;
margin: 0px;
}

Answer 3

根据讨论，您希望在图像周围建立边框，但我不确定您的要求。

<img src="something.jpeg" class="img"/>

对于简单的细边框：

img { 
   border:1px solid #021a40;
   height:150px;
   width:150px;
}

“双边界”：

img {
   padding:1px;
   border:1px solid #021a40;
   height:150px;
   width:150px;
}

具有不同内边框颜色的双边框：

img {
   padding:1px;
   border:1px solid #021a40;
   background-color:#ff0;
   height:150px;
   width:150px;
}

Answer 4

以下是使用relative定位的解决方案，其中包含CSS中的注释。

诀窍是：

使用relative定位
使用z-index将一个元素放在另一个元素的前面（需要absolute或relative张贴。
通过relative定位，top和left成为调整。
可以使用三个属性实现水平居中
- display: block;
- width: …;
- margin: … auto;（自上而下，通常为0;左右为auto）。

img {
  border-radius:100%;		/*	display as circle	*/
  position:relative;		/*	allow z-index 		*/

  border: 2px solid #666;		/*	display border					*/
  z-index: 1000;			/*	display in front of hr	*/
  background-color: white;		/*	just in case		*/
  display: block;			/*	to allow centering	*/
  width: 150px;			/*	same as width in img	*/
  margin: 0 auto;			/*	horizontal centering	*/
}
hr {
  position:relative;		/*	Allow adjustment below:	*/
  top: -85px;			/*	Move up from default	*/
  width: 555px;

  height: 2px;			/*	cross-platform thickness	*/
  border: none;
  background: #666;
}

<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a" width="150" height="150">
<hr>

如何用图像覆盖线条？

4 个答案: