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

79

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

Коли я намагався використовувати фонове зображення у div меншого розміру, div відображає лише частину зображення. Як я можу показати повну або певну частину зображення?
У мене менше зображення, і я хочу використовувати його у більшому div. Але не хочу використовувати функцію повторення.
Чи існує якийсь спосіб у CSS маніпулювати непрозорістю зображення?

css background-image opacity

128

Змініть розмір зображення відповідно до розміру 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

— йосі
джерело

але це створить навантаження на сервер для завантаження декількох зображень (що є подібним, як відомо v)), тому замість використання декількох зображень, використання одного зображення та strechg n збірка є кращим способом .. але не знайте, як це ..

— Aakash Sahai

Пункти 1 і 2 не є рішеннями цієї проблеми. Перший пункт стосується збереження пропорції зображення, другий момент, здається, взагалі не працює. За допомогою CSS3 властивість background-size вирішить цю проблему, до цього часу, мабуть, вам слід залишити якийсь хакер.

— Sondre

IE не підтримує цього (розмір bg). Що робити?

— KarSho

82

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

background-size: cover;

— Уаді
джерело

2

Найменший коментар на цій сторінці та найбільша користь у моєму випадку. Дякую

— Руслан Абузант

1

у мене не працює, але мій div знаходиться всередині <th> всередині <tr> всередині <table>. не знаю, чому саме тому

— user1709076

не могли б ви створити jsfiddle для вашого прикладу? тож ми можемо вам допомогти

— Уаді

22

Для мене це чудово працювало

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

— Днянешвар Харер
джерело

цей підходить для фонового зображення як по ширині, так і по висоті, саме те, що потрібно.

— Борис Гафуров

9

Спробуйте нижче сегмент коду, я вже пробував сам:

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

— Бенія Есмайлян
джерело

Ласкаво просимо до Stack Overflow! Хоча ця відповідь, ймовірно, правильна і корисна, бажано, якщо ви додасте до неї якесь пояснення, щоб пояснити, як це допомагає вирішити проблему. Це стає особливо корисним у майбутньому, якщо відбудеться зміна (можливо, не пов’язана), яка призведе до того, що вона перестане працювати, і користувачі повинні зрозуміти, як це колись працювало.

— Kevin Brown

8

Замість того, щоб давати background-size:100%;
Ми можемо дати background-size:contain;
Перевірте це, щоб отримати доступні різні варіанти: http://www.css3.info/preview/background-size/

— vivekj011
джерело

6

Це буде працювати як шарм.

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

— Джаянта Бісвас
джерело

Дякую. Шукав спеціально для цього. Зробив це роки тому і забув.

— Олексій Рогачевський

містять не охоплює весь div. Тож обкладинка, здається, є тим, що шукає op.

— павутини

0

Я погоджуюся з прикладом Йоссі, розтягніть зображення відповідно до 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), зображення буде масштабовано до div, настільки велике чи менше буде працювати обидва
Так само, як у йосі.

— Bazzz
джерело

помилка, форматування мого повідомлення не спрацювало? Я використав піктограму на панелі інструментів ... :(

— Bazzz,

я пробував це раніше, і тепер теж ... якщо розмір зображення 100px 100px, а div має розмір 400px 400px, тоді його закріплюють у верхньому куті. найновіші браузери safari

— Aakash Sahai

Ось приклад: jsfiddle.net/9mawE/1 Ширина div становить 150 пікселів. Логотип Google має ширину більше 150 пікселів, але його масштаб зменшується відповідно до div. Значок Google Earth має ширину менше 150 пікселів і масштабується відповідно до div шириною 150 пікселів, розмір фону не працює в IE 8, оскільки це CSS 3, який досі не підтримується.

— Bazzz