Question

您好我想知道如何设置我用CSS加载的图像，我是通过使用代码完成的：

.news1 {
content: url("https://i.vimeocdn.com/portrait/58832_300x300");
}

然后我试着通过这样做来设计：

.news1 img:hover {
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

然后我也试过了：

 .news1 content:hover {
     -moz-transform: scale(1.1);
     -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

Answer 1

如果您尝试在CSS中设置背景图像，则应使用background属性设置图像。

＆＃13;

.news1 {
  background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  height:300px;
  width: 300px;
  transition: all .4s ease;
}

.news1:hover {
  transform: scale(1.1);
}

＆＃13;

<div class="news1"></div>

＆＃13;

Answer 2

背景图片和内容图片不是单独的元素，它们是他们声明的元素的样式。

例如，而不是使用：

.news1 img:hover {
  /* ... */
}

你会使用：

.news1:hover {
  /* ... */
}

如果您确实想要将图像与元素分开设置样式，则图像必须具有自己的元素。这可以是内部img元素的形式，也可以将图像作为其他内部元素的背景。

如何设置背景图像CSS样式

2 个答案: