Чи можна встановити розмір фонового зображення за допомогою CSS?
Я хочу зробити щось на кшталт:
background: url('bg.gif') top repeat-y;
background-size: 490px;Але здається, це абсолютно неправильно робити це так ...
Відповіді:
Якщо вам потрібно збільшити зображення, потрібно редагувати саме зображення в редакторі зображень.
Якщо ви використовуєте тег img, ви можете змінити розмір, але це не дасть бажаного результату, якщо вам потрібно, щоб зображення було фоновим для іншого вмісту (і воно не повториться так, як вам здається, що хочеться) ...
Це можливо зробити в CSS3 за допомогою background-size.
Усі сучасні браузери підтримують це, тому, якщо вам не потрібно підтримувати старі браузери, це спосіб зробити це.
Підтримувані браузери:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) та Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}Зокрема, мені подобаються coverта containзначення, які надають нам нову силу контролю, якої у нас раніше не було.
Ви також можете використовувати background-size: roundте, що має значення у поєднанні з повтором:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}Це дозволить відрегулювати ширину зображення, щоб воно вміщувалося цілу кількість разів у зоні позиціонування фону.
Додаткова примітка
Якщо потрібний розмір - це статичний розмір пікселів, все-таки розумно фізично змінити розмір фактичного зображення. Це є як для покращення якості розміру (враховуючи, що ваше програмне забезпечення для зображень виконує кращу роботу, ніж браузери), так і для збереження пропускної здатності, якщо вихідне зображення більше, ніж показ.
Тільки CSS 3 підтримує це,
background-size: 200px 50px;Але я редагував би саме зображення, щоб користувачеві потрібно було завантажувати менше, і воно може виглядати краще, ніж зменшене зображення без антиалійного.
background: url('resized_image.png')\9;за IE lt 9
Якщо ваші користувачі використовують лише Opera 9.5+, Safari 3+, Internet Explorer 9+ та Firefox 3.6+, відповідь - так. Інакше ні.
Фон-розмір властивість є частиною CSS 3, але він не буде працювати на більшості браузерів.
Для своїх цілей просто зробіть фактичне зображення більшим.
Неможливо . Фон завжди буде настільки великим, наскільки він може бути, але ви можете не допустити повторення background-repeat.
background-repeat: no-repeat;По-друге, фон не заходить у поле поля, тому, якщо ви хочете, щоб фон знаходився лише на фактичному вмісті поля, ви можете використовувати поле замість прокладки.
По-третє, ви можете контролювати, звідки починається фонове зображення. За замовчуванням це верхній лівий кут поля, але ви можете керувати цим background-position, як це:
background-position: center top;чи, може,
background-position: 20px -14px;Негативне позиціонування багато використовується з спрайтами CSS .
Є один забутий аргумент:
background-size: contain;Це не розтягне ваше, background-imageяк це робиться cover. Він буде розтягуватися до тих пір, поки довша сторона не досягне ширини або висоти зовнішньої ємності і, таким чином, збереже зображення.
Правка: Є також -webkit-background-sizeі -moz-background-size.
Властивість фонового розміру підтримується в IE9 +, Firefox 4+, Opera, Chrome та Safari 5+.
На підтримку відповіді, яку дав @tetra, я хочу зазначити, що якщо зображення є SVG, то змінити розмір фактичного зображення не потрібно.
Оскільки файл SVG - це лише XML, ви можете вказати, якого розміру ви хочете, щоб він відображався в XML.
Однак якщо ви використовуєте одне і те ж зображення SVG у різних місцях і потребуєте його різного розміру, то використання background-sizeдуже корисно. Файли SVG за своєю суттю менші, ніж растрові зображення, і зміна розміру в режимі ходу за допомогою CSS може бути дуже корисною без будь-яких витрат на продуктивність, про які я знаю, і, звичайно, мало, до втрати якості.
Ось короткий приклад:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Примітка. Для мене це працює в OS X 10.7 з Firefox 8, Safari 5.1 та Chrome 16.0.912.63)
Ви повністю можете з CSS3:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}Це дозволить розмістити фонове зображення на 100% від ширини елемента тіла, а потім відповідно змінити розмір фону, оскільки елемент корпусу буде перерозмірюватися для меншої роздільної здатності.
Ось приклад: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Просто вкладені діви повинні бути сумісними між веб-переглядачами
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Можна використовувати два <div>елементи:
Один - контейнер (це той, для якого ви спочатку хотіли, щоб фонове зображення з’явилося на).
Другий міститься всередині. Ви встановлюєте його розмір відповідно до розміру фонового зображення (або розміру, який ви бажаєте відображати).
Потім міститься div, який встановлюється для розміщення absolute. Таким чином, це не заважає нормальному потоку елементів, що містять дів.
Це дозволяє ефективно використовувати спрайт-зображення.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;Ви написали
background: url('bg.gif') top repeat-y;
background-size: 490px;але ви побачите лише фон залежно від розміру контейнера.
якщо у вас порожній контейнер з URL-адресою фону і будь-якого розміру фону, ви не побачите bg.gif.
Якщо встановити розмір континента на
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;в поєднанні з кодом, який ви написали вище, ви зможете побачити файл bg.gif.
background-size працює в Chrome 4.1, але поки що я не міг змусити його працювати у Firefox 3.6.
Я використовую фонові зображення для кнопок, але воно показує зображення лише того ж розміру, що і текст, навіть якщо я встановлюю ширину та висоту. Натомість я прошиваю свій текст символами (нерозривні пробіли). В основному я плескаю стільки, скільки потрібно, поки не з’явиться весь фон кнопки. Тож у мене може бути такий код:
У таблиці стилів:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}У документі HTML:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Наприклад:
фонове зображення завжди буде відповідати розміру контейнера (ширина 100% і висота 100 пікселів).
Крос-браузер CSS:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
Це можливо зробити в CSS3 з розміром фону
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Якщо ви хочете встановити background-sizeв тій самій backgroundвласності, ви можете використовувати:
background:url(my-bg.png) no-repeat top center / 50px 50px;