Как применить CSS для изображения, импортированного CSS

Question

Как мы можем применить CSS к изображению, которое импортируется css через background: url ('..'). например: Я хочу применить радиус границы на изображении .jpg.

<div></div> 

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

Answer 1

Вы не можете непосредственно создавать фоновые изображения. Вы можете стилизовать элемент, на котором изображен фон; в этом примере, div. Если вам нужен радиус границы, просто добавьте его в CSS с помощью border-radius.

Даже если у вас есть границы радиуса, установленного на div, он все равно будет иметь квадратную ограничительную рамку:

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

Для достижения радиуса границы, вы должны предоставить границу атрибут radius для объекта контейнера. здесь ваш объект div.

добавить так:

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