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

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

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

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

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


css opacity background-image
person Aakash Sahai    schedule 24.01.2011    source источник

Ответы (7)


arrow_upward
134
arrow_downward

Измените размер изображения, чтобы оно соответствовало размеру блока.
С помощью 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

person yossi    schedule 24.01.2011
comment
но это создаст нагрузку на сервер для загрузки нескольких изображений (что похоже, как я знаю).. поэтому вместо использования нескольких изображений лучше использовать одно изображение и растянуть n коллапс.. но не знаю, как это сделать.. - person Aakash Sahai; 24.01.2011
comment
Пункты 1 и 2 не являются решением этой проблемы. Первый пункт предназначен для сохранения соотношения сторон изображения, второй пункт, похоже, вообще не работает. С CSS3 свойство background-size решит эту проблему, до тех пор, я думаю, вам придется придерживаться какого-нибудь хака. - person Sondre; 24.01.2011
comment
IE не поддерживает это (bg-size). Что делать? - person KarSho; 21.03.2013

arrow_upward
87
arrow_downward

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

background-size: cover;
person Ouadie    schedule 14.01.2014
comment
Самый маленький комментарий на этой странице и самая большая польза в моем случае. Спасибо - person Ruslan Abuzant; 11.03.2016
comment
у меня не работает, но мой div находится внутри ‹th› внутри ‹tr› внутри ‹table› . не знаю, поэтому ли - person user1709076; 12.04.2016
comment
не могли бы вы создать jsfiddle для вашего примера? так что мы можем помочь вам - person Ouadie; 13.04.2016

arrow_upward
26
arrow_downward

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

background-repeat: no-repeat;
background-size: 100% 100%;
person Dnyaneshwar Harer    schedule 05.10.2017
comment
этот подходит фоновому изображению как по ширине, так и по высоте, именно то, что нужно. - person Boris Gafurov; 09.05.2019

arrow_upward
10
arrow_downward

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

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}
person Behnia Esmailian    schedule 08.06.2015
comment
Добро пожаловать в Stack Overflow! Хотя этот ответ, вероятно, правильный и полезный, желательно, чтобы вы включили в него какое-то объяснение, объясняющее, как это помогает решить проблему. Это становится особенно полезным в будущем, если есть изменение (возможно, не связанное с этим), из-за которого оно перестает работать, и пользователям нужно понять, как оно когда-то работало. - person Kevin Brown; 09.06.2015

arrow_upward
8
arrow_downward

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

person vivekj011    schedule 22.08.2013

arrow_upward
7
arrow_downward

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

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
person Jayanta Biswas    schedule 15.04.2015
comment
Спасибо. Искал специально для этого. Сделал это много лет назад и забыл. - person Alex Rogachevsky; 15.12.2016
comment
содержит не покрывает весь div. Так что прикрытие, кажется, то, что ищет оператор. - person webs; 24.01.2018

arrow_upward
0
arrow_downward

  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. Показать часть изображения с помощью background-position:

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

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

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

person Bazzz    schedule 24.01.2011
comment
эээ, форматирование моего поста не сработало? Я использовал значок панели инструментов... :( - person Bazzz; 24.01.2011
comment
Я пробовал это раньше, и теперь тоже. последние браузеры сафари - person Aakash Sahai; 24.01.2011
comment
Вот пример: jsfiddle.net/9mawE/1 Ширина элемента div составляет 150 пикселей. Логотип Google имеет ширину более 150 пикселей, но он уменьшен, чтобы поместиться в div. Значок Google Планета Земля имеет ширину менее 150 пикселей и масштабируется, чтобы соответствовать div шириной 150 пикселей. Размер фона не работает в IE 8, поскольку это CSS 3, который по-прежнему не поддерживается. - person Bazzz; 24.01.2011