Question

我想要一个边框围绕我的图片，这是半透明的显示＆＃39;背景＆＃39; （即不是图片）。由于css顺序是内容，填充，边框，边距，所以我希望我的图片内容周围的边框，但可能是因为我的图片被设置为背景（使其缩放）它不能像我预期的那样工作。现在它通过我的光泽边框显示我的照片的部分，例如：

和

如何在我的照片周围找到边框？

＆＃13;

body {
	background-color: #fff;
	margin: 0 0;
	padding: 0 0;
}

.overlay {
	display: flex;
	position: absolute;
	background-color: #808080;
	cursor: pointer;
	color: #f00;
	flex-flow: row nowrap;
	justify-content: flex-start;
	height: 40vh;
	width: 100vw;
	bottom: 0;
	left: 0;
	margin: 0;
	overflow-y: hidden;
	overflow-x: scroll;
}

.overlay .item-image {
	border-radius: 5px;
	flex: 1 1 auto;
	min-width: 45vw;
	width: 45vw;
	margin-left: 4vw;
	border: 15px solid rgba(255,255,255,0.3);
	border-radius: 2px;
}

＆＃13;

<meta name="description" content="Transparent border not working">
<body>
  <div class="overlay">
    <div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
      </div>
     <div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
      </div>
       </div>
    </body>

＆＃13;

Answer 1

您可能正在寻找的属性是background-clip。将值设置为content-box或padding-box，结果是背景图像不会在边框下继续（顺便说一句，这是由于图像尺寸不同而导致的从div的维度和background-size: cover）。

＆＃13;

body {
  background-color: #fff;
  margin: 0 0;
  padding: 0 0;
}
.overlay {
  display: flex;
  position: absolute;
  background-color: #808080;
  cursor: pointer;
  color: #f00;
  flex-flow: row nowrap;
  justify-content: flex-start;
  height: 40vh;
  width: 100vw;
  bottom: 0;
  left: 0;
  margin: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.overlay .item-image {
  border-radius: 5px;
  flex: 1 1 auto;
  min-width: 45vw;
  width: 45vw;
  margin-left: 4vw;
  border: 15px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

＆＃13;

<meta name="description" content="Transparent border not working">

<body>
  <div class="overlay">
    <div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover; background-clip: content-box'>
    </div>
    <div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover; background-clip: content-box'>
    </div>
  </div>
</body>

＆＃13;

万一我误解了这个问题你希望各方都有透明的边框，你可以这样做：

＆＃13;

body {
  background-color: #fff;
  margin: 0 0;
  padding: 0 0;
}
.overlay {
  display: flex;
  position: absolute;
  background-color: #808080;
  cursor: pointer;
  color: #f00;
  flex-flow: row nowrap;
  justify-content: flex-start;
  height: 40vh;
  width: 100vw;
  bottom: 0;
  left: 0;
  margin: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.overlay .item-image {
  position: relative;
  border-radius: 5px;
  flex: 1 1 auto;
  min-width: 45vw;
  width: 45vw;
  margin-left: 4vw;
}
.overlay .item-image:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 15px solid rgba(255, 255, 255, 0.3);
}

＆＃13;

<meta name="description" content="Transparent border not working">

<body>
  <div class="overlay">
    <div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
    </div>
    <div class="item-image" style='background: url(http://previews.123rf.com/images/bagiuiani/bagiuiani1003/bagiuiani100300014/15165060-Mellons-Stock-Photo.jpg) no-repeat 20% center; background-size: cover;'>
    </div>
  </div>
</body>

＆＃13;

在（背景）图像周围设置不透明边框

1 个答案: