Question

我正在尝试在带有背景图像的div周围放置一个圆圈边框。我希望背景图像与它和边框之间的10px填充一样大。当用户滚动并移除边框时，此图像会转换（缩小）到50像素，因此需要保留尽可能多占用空间的背景图像

CSS

.brand, .brand:visited, .brand:hover {
 display: block;
 position: relative;
 height: 100px; width: 100px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 padding: 10px;
 border: 1px solid #fff;
 border-radius: 50%;
}

除了填充之外，一切都有效。不知道如何解决它。另外，我不想剪裁背景图像

Answer 1

元素的背景适用于任何填充...除非更改background-clip属性。

＆＃13;

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  padding: 10px;
  border: 1px solid red;
  border-radius: 50%;
  background-clip: content-box;
}
.brand:hover {
  padding: 5px;
}

＆＃13;

<div class="brand"></div>

＆＃13;

替代：对外部＆＃34;边框＆＃34;使用宽边框和框阴影。

＆＃13;

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  box-shadow: 0px 0px 0px 1px red;
  border: 10px solid white;
  border-radius: 50%;
}
.brand:hover {
  border-width: 5px;
}

＆＃13;

<div class="brand"></div>

＆＃13;

Answer 2

这是添加到.brand类的边框，其相对位置为.brand，其中:after伪类位于绝对位置。
这是为了创造一个超出形状的cricle。

＆＃13;

.brand,
.brand:visited,
.brand:hover {
  position: relative;
  height: 100px;
  width: 100px;
  margin-top: 25px;
  margin-left: 25px;
  background: url('http://lorempixel.com/200/200') no-repeat center center;
  background-size: 100% auto;
  border-radius: 50%;
}
.brand:before {
  display: inline-block;
  position: absolute;
  left: -15px;
  top: -15px;
  content: "";
  width: 120px;
  height: 120px;
  border: 5px solid #fff;
  border-radius: 50%;
}
body {
  background-color: #222;
}

＆＃13;

<div class="brand"></div>

＆＃13;

Answer 3

据我所知，我们无法对background:进行未剪辑padding:考虑。

所以...这有点hacky，但你可以：

声明box-sizing: border-box;
border:代表padding:;然后
box-shadow:代表border:。

见下面的例子：

＆＃13;

/* Your original styles */
.brand, .brand:visited, .brand:hover {
 display: block;
 position: relative;
 height: 100px; width: 100px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 padding: 10px;
 border: 1px solid #fff;
 border-radius: 50%;
}

/* A few extra styles just to make the background and border visible */
.brand, .brand:visited, .brand:hover {
 background-color: rgb(0,0,0);
 border: 1px solid rgb(255,0,0);
}

/* An alternative using border-box, and box-shadow */
.brand2, .brand2:visited, .brand2:hover {
 display: block;
 position: relative;
 height: 122px; width: 122px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 background-color: rgb(0,0,0);
 border: 10px solid #fff;
 border-radius: 50%;
 box-sizing: border-box;
 box-shadow:1px 1px rgb(255,0,0), 1px -1px rgb(255,0,0), -1px -1px rgb(255,0,0), -1px 1px rgb(255,0,0);
}

/* Lining everything up */
div[class^='brand'] {
float: left;
margin-right:20px;
}

＆＃13;

<div class="brand"></div>
<div class="brand2"></div>

＆＃13;

填充不在边界div上工作

3 个答案: