如何在CSS导入的图像上应用css

Question

我们如何在css通过background：url（'..'）属性导入的图像上应用CSS。 例如：我想在image.jpg上应用border-radius。

<div></div>

div {
  background: url('image.jpg'); 
}

Answer 1

您无法直接设置背景图片的样式。您可以为图像作为背景的元素设置样式;在此示例中，div。如果您想要边框半径，只需将其添加到带有border-radius的CSS中。

即使您在div上设置了border-radius，它仍然会有一个方形边框：

div {
  width: 200px;
  height: 200px;
  background: url('http://lorempixel.com/200/200/');
  border-radius: 50%;
}

<div>
  Text in here is not automatically inside the "circle."
</div>

Answer 2

要实现边框半径，必须为容器对象提供border radius属性。这里你的对象是div。

像这样添加：

div {
background: url('image.jpg'); 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}