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

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

Когда я пытался использовать фоновое изображение в div меньшего размера, div показывает только часть изображения. Как показать полную или конкретную часть изображения?
У меня есть меньшее изображение, и я хочу использовать его в более крупном div. Но не хотите использовать функцию повторения.
Можно ли каким-либо образом в CSS управлять непрозрачностью изображения?

Ответы

Ответ 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

Ответ 2

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

background-size: cover;

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Я согласен с примером yossi, растягиваю изображение, чтобы соответствовать div, но немного по-другому (без фонового изображения, так как это немного негибкий в 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*/
}
```

Показывать часть изображения с использованием фонового положения:

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

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

Ответ 7

Это отлично сработало для меня

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