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

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

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

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

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

7 55
css background-image opacity

7 ответов:

измените размер изображения в соответствии с размером 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 непрозрачность изображения / прозрачность

100

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

background-size: cover;
61

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

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

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

8

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

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

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

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

  1. Я согласен с примером Йосси, растянуть изображение, чтобы соответствовать 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*/
}

  2. показать часть изображения с помощью фона-положение:

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

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

  4. так же, как Йоси это.

0