如何为背景图片CSS设置样式

Question

Hello I am trying to figure how I can style an image that I have loaded with CSS, I did this by using the code:

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

I then tried to style this by doing:

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

I then also tried:

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

Answer 1

If you are trying to set the background image in CSS you should set the image use the background property.

 .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); } 

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

Answer 2

Background images and content images are not separate elements, they are styling of the element they're declared on.

For example, rather than using:

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

You would use:

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

If you actually want to style the image separately from the element, the image will have to have it's own element. This could be in the form of an inner img element, or by placing the image as the background of some other inner element.