Фоновые изображения: как заполнить весь div, если изображение маленькое и наоборот

Question

У меня три проблемы:

1. Когда я пытался использовать фоновое изображение в div меньшего размера, div показывает только часть изображения. Как я могу показать полную или определенную часть изображения?

2. У меня есть уменьшенное изображение, и я хочу использовать его в большем div. Но не хочу использовать функцию повтора.

3. Есть ли способ в CSS манипулировать непрозрачностью изображения?

Answer 1

Измените размер изображения, чтобы он соответствовал размеру div.
С помощью CSS3 вы можете сделать это:

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

Как растянуть фоновое изображение на веб-странице :

О непрозрачности

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Или посмотрите на Непрозрачность / прозрачность изображения CSS

Answer 2

Чтобы автоматически увеличить изображение и покрыть весь раздел div, не оставляя ни одной его части незаполненной, используйте:

background-size: cover;

Answer 3

Это прекрасно сработало для меня

background-repeat: no-repeat;
background-size: 100% 100%;

Answer 4

Попробуйте ниже сегмент кода, я сам пробовал раньше:

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}

Answer 5

Вместо того, чтобы давать background-size:100%;
Мы можем дать background-size:contain;
Проверьте это для различных доступных вариантов: http://www.css3.info/preview/background-size/

Answer 6

Это будет работать как шарм.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;

Answer 7

1. Я согласен с примером Йосси: растяните изображение, чтобы подогнать его под div, но немного по-другому (без background-image, поскольку это немного негибко в css 2.1).Показать полное изображение:

   <div id="yourdiv">
       <img id="theimage" src="image.jpg" alt="" />
   </div>
   
   #yourdiv img {
       width:100%;
     /*height will be automatic to remain aspect ratio*/
   }
   

2. Показать часть изображения, используя background-position:

   #yourdiv 
   {
       background-image: url(image.jpg);
       background-repeat: no-repeat;
       background-position: 10px 25px;
   }
   

3. То же, что и первая часть(1) изображение масштабируется до div, так что больше или меньше будет работать

4. То же, что и у Йосси.