如果有带有图像的 div 标签，如何使边界半径工作

Question

I have HTML and CSS like this:

 .item { width: 100%; height: 768px; background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200"); background-repeat: no-repeat; background-size: 100% auto; border-radius: 50px 50px; }

 <div class='item'></div>

When I resize the browser, the bottom border-radius doesn't work.

Answer 1

Change background-size: cover; and you could add background-position: center; to center your image.

 .item { width: 100%; height: 768px; background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200"); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius:50px 50px; }

 <div class='item'></div>

Answer 2

As mentioned in other answers, you might want to use background-size: cover; . It will stretch the image to cover the whole area of the div (so the border-radius will be visible).

However since the image can be cropped after this change (specifically in the case when it does not have the same aspect-ratio like the area of the div), it might be necessary to use also background-position to position the background image as you like (by default it is aligned to the top left corner).

Most probably you will have good results with centering it, but the possibilities are endless;)

background-size: cover;    
background-position: center;