Url background image css: background-image | htmlbook.ru

Содержание

background-image - CSS | MDN

Свойство CSS  background-image устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS свойствами background-clip и background-origin.

Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

Обратите внимание: Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут background-color. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;

Значения

none
Это ключевое слово обозначает отсутствие изображений.
<image>
<image> (en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается несколько фонов (en-US).

Официальный синтаксис

<bg-image># (en-US)

где
<bg-image> = none | (en-US) <image> (en-US)

где
<image> = <url> | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>

где
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )

<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>

где
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> (en-US) | (en-US) <string> (en-US) ] (en-US) <resolution> (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image> (en-US)
<cf-final-image> = <image> (en-US) | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )

<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )

где
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )

<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>

где
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>

<length-percentage> = <length> | (en-US) <percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>

где
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>

Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

HTML содержимое
<div>
    <p>
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p>
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>
CSS содержимое
pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support yes yes yes yes
Multiple backgrounds yes yes yes yes
Gradients yes -webkit (en-US)
old webkit syntax for iOS 4.2 and older
? ? yes-webkit (en-US)
old webkit syntax
SVG images yes [2] yes yes Нет
element (Да)-moz (en-US) ? ? ?
image-rect
(Да)-moz (en-US)
Нет Нет Нет
Any <image> (en-US) value Нет ? ? ?

[1] Если пользовательские настройки browser.display.use_document_colors в about:config установлены на false, фоновые изображения не будут отображаться.

[2] Поддержка SVG в CSS background является неполной в текущей версии iOS Safari (5.0). То же самое для Safari до 5.0.

background - CSS | MDN

Сокращённое CSS свойство background  устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Исходный код этого интерактивного примера хранится в репозитории GitHub.  Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment.

Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.


background: green;


background: url("test.jpg") repeat-y;


background: border-box red;


background: no-repeat center/80% url("../img/image.png");
Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

Значения

Формальный синтаксис

[ (en-US) <bg-layer> , ] (en-US)* (en-US) <final-bg-layer>

где
<bg-layer> = <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>

<final-bg-layer> = <'background-color'> || (en-US) <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>

где
<bg-image> = none | (en-US) <image> (en-US)
<bg-position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US) ] (en-US)
<bg-size> = [ (en-US) <length-percentage> | (en-US) auto ] (en-US){ (en-US)1,2} (en-US) | (en-US) cover | (en-US) contain

<repeat-style> = repeat-x | (en-US) repeat-y | (en-US) [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){ (en-US)1,2} (en-US)
<attachment> = scroll | (en-US) fixed | (en-US) local
<box> = border-box | (en-US) padding-box | (en-US) content-box

где
<image> = <url> | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
<length-percentage> = <length> | (en-US) <percentage>

где
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>

где
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> (en-US) | (en-US) <string> (en-US) ] (en-US) <resolution> (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image> (en-US)
<cf-final-image> = <image> (en-US) | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )

где
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>

где
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>

где
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>

HTML

<p>
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p>Here is a paragraph<p>

CSS

. warning {
  background: red;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}

Результат

BCD tables only load in the browser

Webpack не загружает изображения из свойства background-image из CSS

I have no clue what to do... I am using Webpack with CSS, style, sass and stylus loaders. Here is my webpack config... Images do not show up when I use something like:

body
     background-image: url('bg.jpg')

If I include image inside HTML with <img> tag they work normally...

My webpack config:

var path = require('path')

module.exports = {
    entry: {
     app: './src/main.js'
    },
    output: {
     path: path.resolve(__dirname, '../dist/static'),
     publicPath: '/static/',
     filename: '[name].js'
    },
    resolve: {
     extensions: ['', '.js', '.vue'],
     alias: {
      'src': path.resolve(__dirname, '../src')
     }
    },
    resolveLoader: {
     root: path.join(__dirname, 'node_modules')
    },
    module: {
     preLoaders: [
      {
       test: /\.vue$/,
       loader: 'eslint',
       exclude: /node_modules/
      },
      {
       test: /\.js$/,
       loader: 'eslint',
       exclude: /node_modules/
      }
     ],
     loaders: [
      {
       test: /\.vue$/,
       loader: 'vue'
      },
      {
       test: /\.js$/,
       loader: 'babel',
       exclude: /node_modules/
      },
      {
       test: /\.json$/,
       loader: 'json'
      },
      {
       test: /\.scss$/,
       loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
      },
      {
       test: /\.woff/,
       loader: 'url?prefix=font/&limit=10000&mimetype=application/font-woff'
      }, {
       test: /\.ttf/,
       loader: 'file?prefix=font/'
      },
      {
       test: /\.eot/,
       loader: 'file?prefix=font/'
      },
      {
       test: /\.svg/,
       loader: 'file?prefix=font/'
      },
      {
       test: /\. (jpe?g|png|gif|svg)$/i,
       loaders: [
        'url?limit=10000&name=[name].[ext]?[hash:7]',
        'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
       ]
      }
     ]
    },
    eslint: {
     formatter: require('eslint-friendly-formatter')
    },
    vue: {
     loaders: {
      sass: 'style!css!sass?indentedSyntax'
     }
    }
}

Я понятия не имею, что делать ... Я использую Webpack с CSS, стилем, sass и stylus загрузчиками. Вот мой WebPack конфигурация ... Изображения не отображаются, когда я использую что-то вроде:

body 
    background-image: url('bg.jpg') 

Если я включаю изображение в HTML с <img> тегом они работают нормально ...

Моего WebPack конфигурация:

var path = require('path') 

module.exports = { 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: path.resolve(__dirname, '../dist/static'), 
    publicPath: '/static/', 
    filename: '[name].js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.vue'], 
    alias: { 
    'src': path.resolve(__dirname, '../src') 
    } 
    }, 
    resolveLoader: { 
    root: path.join(__dirname, 'node_modules') 
    }, 
    module: { 
    preLoaders: [ 
    { 
    test: /\.vue$/, 
    loader: 'eslint', 
    exclude: /node_modules/ 
    }, 
    { 
    test: /\.js$/, 
    loader: 'eslint', 
    exclude: /node_modules/ 
    } 
    ], 
    loaders: [ 
    { 
    test: /\.vue$/, 
    loader: 'vue' 
    }, 
    { 
    test: /\.js$/, 
    loader: 'babel', 
    exclude: /node_modules/ 
    }, 
    { 
    test: /\.json$/, 
    loader: 'json' 
    }, 
    { 
    test: /\.scss$/, 
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
    }, 
    { 
    test: /\.woff/, 
    loader: 'url?prefix=font/&limit=10000&mimetype=application/font-woff' 
    }, { 
    test: /\.ttf/, 
    loader: 'file?prefix=font/' 
    }, 
    { 
    test: /\. eot/, 
    loader: 'file?prefix=font/' 
    }, 
    { 
    test: /\.svg/, 
    loader: 'file?prefix=font/' 
    }, 
    { 
    test: /\.(jpe?g|png|gif|svg)$/i, 
    loaders: [ 
     'url?limit=10000&name=[name].[ext]?[hash:7]', 
     'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}' 
    ] 
    } 
    ] 
    }, 
    eslint: { 
    formatter: require('eslint-friendly-formatter') 
    }, 
    vue: { 
    loaders: { 
    sass: 'style!css!sass?indentedSyntax' 
    } 
    } 
} 

img или background-image? Что лучше?

В любом дизайне сайта используются картинки. Но мало кто задумывается над вопросом а когда именно при верстке макета стоит применять html тег img, а когда css свойство background-image? Есть ли между ними вообще различие? На самом деле есть и достаточно существенное. Об этом и пойдет речь в данной статье.

Главное различие img и background-image

Когда мы вспоминаем основное назначение html и css оно для нас становится очевидным, но почему-то пока над этим не задумываешься заметить его становится не так уж и просто.

Различие состоит в том, что картинки несущие смысловую нагрузку или же каким-либо образом относящиеся к содержанию страницы следует вставлять тегом img (картинки в тексте, баннеры, картинки слайдера, аватарки и тд). Все остальное (просто элементы оформления: различного рода разделители, маркеры, фоны и тд.) следует вставлять в дизайн используя background-image.

В чем преимущества данного подхода?

  • В первую очередь таким образом мы очищаем код страницы, что значительно улучшает его читабельность, упрощает понимание документа поисковым роботам, ускоряет загрузку страницы за счет все того же уменьшения документа, в общем крайне положительно сказывается на SEO оптимизации страницы.
  • Используя img для вывода картинок несущих на себе смысловую нагрузку мы даем возможность поисковикам прочитать альты этих картинок и лучше понять что они из себя представляют, есть возможность получения дополнительного трафика на сайт из сервисов поиска по картинкам, получаем лучшую уникализацию контента (поисковики любят текст разбавленный картинками, поскольку это обычно улучшает поведенческие факторы посетителей ресурса).
  • Различные рекламные сервисы, счетчики и CMS для вывода своего содержимого и аватарок посетителей используют картинки, что абсолютно нормально и логично, поскольку данные элементы по логике вещей относятся не к оформлению страницы, а к ее содержимому.

Нюансы из практики

  • При печати страницы сайта теги img печатаются, а background-ы нет.
  • Все, что желательно к индексации поисковиками выводим картинками, все что хотим скрыть- фонами.
  • Браузеры разработанные для людей с ограниченными возможностями читают альты картинок, потому если изображение несет важный смысл, оно обязательно должно быть оформлено html тегом.
  • Некоторые старые браузеры не поддерживают свойство background-size и для создания масштабируемого фона в них используется тег, а не свойство фона.
  • Img с анимацией меньше нагружает браузеры.
  • Для замены текста изображением лучше использовать background-image (к примеру, если нужно вывести заголовки красивыми картинками).
  • Используя свойство фона мы можем вывести на странице только часть изображения.
  • Вытекающая из предыдущего пункта фишка- background-image дает возможность использовать метод спрайтов (за счет того, что все иконки подгружаются с 1 картинки уменьшается количество обращений к серверу при загрузке страницы, что положительно сказывается на скорости) для ускорения загрузки сайта.
  • Картинку спрятанную в фон сайта сложнее выкачать. Хотя как по мне для защиты своих уникальных изображений лучше использовать свои подписи на них, это хоть заставит плагиатщиков повозиться с приведением ее в порядок или же использовать прочие способы защиты уникального контента от копирования.

Подводя итоги

Ничего сложного в размежевании методов вывода изображений нет. С практикой все становится на свои места и даже интуитивно понятно, главное помнить, что все связанное с оформлением сайта должно быть помещено в css, а все связанное с его структурой и смысловым наполнением в html.

Оценок: 17 (средняя 4.9 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

background-image - CSS: каскадные таблицы стилей

Свойство CSS background-image устанавливает одно или несколько фоновых изображений для элемента.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Фоновые изображения рисуются на наложении слоев контекста друг на друга.Первый указанный слой рисуется так, как если бы он был ближе всего к пользователю.

Затем поверх них рисуются границы элемента, а под ними рисуется background-color . То, как изображения рисуются относительно блока и его границ, определяется CSS-свойствами background-clip и background-origin .

Если указанное изображение не может быть нарисовано (например, когда файл, обозначенный указанным URI, не может быть загружен), браузеры обрабатывают его так же, как и значение none .

Примечание: Даже если изображения непрозрачны и цвет не будет отображаться в обычных условиях, веб-разработчики всегда должны указывать background-color . Если изображения не могут быть загружены, например, когда сеть не работает, цвет фона будет использоваться в качестве запасного.

Каждое фоновое изображение задается либо как ключевое слово none , либо как значение .

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

  фоновое изображение:
  linear-gradient (вниз, rgba (255,255,0,0. 5), rgba (0,0,255,0.5)),
  url ('https://mdn.mozillademos.org/files/7693/catfront.png');  

Значения

нет
Ключевое слово, обозначающее отсутствие изображений.
<изображение>
- это <изображение> , обозначающее изображение для отображения. Их может быть несколько, разделенных запятыми, так как поддерживается несколько фонов.

Браузеры не предоставляют никакой специальной информации о фоновых изображениях вспомогательным технологиям.Это важно в первую очередь для программ чтения с экрана, поскольку программа чтения с экрана не сообщает о своем присутствии и, следовательно, ничего не сообщает своим пользователям. Если изображение содержит информацию, важную для понимания общего назначения страницы, лучше описать ее семантически в документе.

  # 

, где
= none | <изображение>

, где
<изображение> = | <изображение ()> | <набор изображений ()> | | <краска ()> | <плавное затухание ()> | <градиент>

где
= image (? [?, ?]!)
= image-set ( #)
= element ()
= paint (, ?)
<переходное затухание ()> = плавное затухание (, ?)
<градиент> = | <повторяющийся линейный градиент ()> | <радиальный градиент ()> | <повторяющийся радиальный градиент ()> |

, где
= ltr | rtl
= | <строка>
<цвет> = | | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <устаревший-системный-цвет>
= [ | ]
=
= <процент>? && <изображение>
= <изображение> |
= linear-gradient ([ | to ]?, )
= повторяющийся-линейный-градиент ([<угол> | до <стороны-или-угла>]?, <список-остановок-цветов>)
<радиальный-градиент ()> = радиальный-градиент ([<конечная-форма> || ]? [at ]?, )
= повторяющийся-радиальный-градиент ([ || <размер >]? [at ]?, )
= conic-gradient ([from ]? [at ] ?, )

где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)
<сторона-или-угол> = [слева | справа] || [наверх | внизу]
<список-остановок-цветов> = [<остановка-цветов> [, <подсказка-цветов>]? ] #,
= круг | эллипс
<размер> = ближайшая сторона | дальняя сторона | ближайший угол | дальний угол | <длина> | <длина-процент> {2}
<позиция> = [[слева | центр | справа] || [наверх | центр | внизу] | [слева | центр | право | <длина-процент>] [наверх | центр | внизу | <длина- процент>]? | [[слева | справа] <длина-процент>] && [[вверх | снизу] <длина-процент>]]
<угловой-список-остановок> = [<угловой-цвет-стоп> [, <угловой-цвет-подсказка>]? ] #, <угловой-цветной-стопор>

, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> | <угол>
= ?
<линейный-цвет-подсказка> = <длина-процент>
<длина-процент> = <длина> | <процент>
<угловой-цвет-стоп> = <цвет> && <цвет-стоп-угол>?
=

, где
= {1,2}
= {1,2}
<угол-процент> = <угол> | <процент>

Наслоение фоновых изображений

Обратите внимание, что изображение звезды частично прозрачно и накладывается на изображение кошки.

HTML
  

Этот абзац полон кошек
и звезд.

Этого абзаца нет.

Вот вам еще кошек.
Посмотрите на них!

И не более того.

CSS
  п {
  размер шрифта: 1.5em;
  цвет: # FE7F88;
  фоновое изображение: нет;
  цвет фона: прозрачный;
}

div {
  изображение на заднем плане:
      url ("https: // mdn.mozillademos.org/files/6457/mdn_logo_only_color.png ");
}

.catsandstars {
  изображение на заднем плане:
      url ("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
      URL ("https://mdn.mozillademos.org/files/7693/catfront.png");
  цвет фона: прозрачный;
}
  
Результат

Таблицы BCD загружаются только в браузере

Учебное пособие по фоновому изображению CSS с примерами

Фоновое изображение, вероятно, является одним из свойств CSS, которые все мы, разработчики интерфейса, использовали по крайней мере несколько раз в своей карьере.Большинство людей думают, что в фоновом изображении не может быть ничего необычного, но после быстрого исследования я пришел к другому выводу.

Каждый день в группах Facebook задают множество вопросов о фоновом изображении CSS и множество неизвестных уловок, которые могут помочь нам добиться потрясающих эффектов и создавать потрясающие приложения и веб-сайты.

Вот почему я решил создать эту статью, чтобы показать вам, какие чудеса можно творить с помощью такого простого свойства CSS. Я собрал семь советов и приемов, которые, на мой взгляд, будут наиболее полезными, и создал несколько примеров кода, где вы можете проверить, что там происходит.

И, если вы, как обычно, не любите читать, перейдите на наш канал Youtube, чтобы посмотреть видеоверсию.

Давайте посмотрим, что скрывается за фоном!

1. Как идеально подогнать фоновое изображение к области просмотра?

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

Позвольте мне показать вам, как сделать так, чтобы ваше фоновое изображение всегда идеально вписывалось в окно вашего браузера!

**** 2.Как использовать несколько фоновых изображений с помощью CSS?

Хм, а что, если я хочу добавить более одного изображения в качестве фона?

Это возможно и не очень сложно, но может дать хороший результат, пока у вас есть идея соединить две графики во что-то красивое.

Я лично считаю, что это очень полезно, когда мы хотим добавить узор поверх фонового изображения, поэтому я покажу вам это в этом примере.

Посмотрим, как это работает!

3.Как создать треугольное фоновое изображение?

Еще один захватывающий трюк с фоновым изображением в CSS - треугольное фоновое изображение. Это создает действительно красивый эффект, особенно когда мы хотим показать совершенно разные варианты, такие как день и ночь, или зима и лето.

Это делается путем создания двух блоков div, оба для всего окна просмотра, затем необходимо добавить фоновое изображение к ним обоим, а затем второму div требуется свойство clip-path для создания треугольной формы.

Посмотрим код и результат!

**** 4. Как добавить градиент на фоновое изображение?

Четвертый трюк, который я хотел бы показать вам в этой статье, касается наложения на фоновое изображение. Это может быть полезно, если вы хотите нанести текст на изображение, но оно слишком светлое и текст не виден, но также может улучшить само изображение.

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

Давайте посмотрим, как легко добавить градиент на фоновое изображение!

**** 5. Как создать анимацию фонового изображения с изменением цвета?

А что, если вы можете решить, какой цвет лучше всего подходит для фонового изображения? Тогда действительно пригодятся анимации на фоновых изображениях.

Использование анимированного оверлея может дать вашему сайту отличный финальный эффект, и люди наверняка его запомнят.

Давайте посмотрим, что мы можем сделать, используя фоновые изображения и анимацию в CSS!

6.Как сделать сетку фонового изображения?

Иногда неплохо было бы немного сойти с ума, особенно если проект посвящен искусству или фотографии, тогда можно создать красивое фоновое изображение с помощью сетки CSS и фонового изображения CSS.

О, если вы не знаете, что такое CSS-сетка, посмотрите здесь.

Давайте взглянем!

7. Как установить фоновое изображение в качестве цвета текста?

Используя фоновое изображение с background-clip вы можете добиться красивого эффекта фонового изображения для текста.В некоторых случаях это может быть очень полезно, особенно если вы хотите создать большой текстовый заголовок, но не такой скучный, как обычный цвет.

Давайте посмотрим, какой потрясающий эффект мы можем получить!

Заключение

В этой статье вы можете увидеть 7 различных советов и приемов, как создавать удивительные вещи с использованием фонового изображения. Я почти уверен, что эти подсказки будут полезны и позволят вам добиться потрясающих результатов на ваших макетах. Если вы хотите ознакомиться с еще несколькими интересными советами и приемами CSS, ознакомьтесь с нашей последней статьей с советами и приемами создания границ CSS и одним из предыдущих советов и приемов CSS.

Если вы когда-либо использовали какое-либо индивидуальное решение для своего фона, дайте мне знать в комментариях, я буду рад узнать, что еще можно сделать с помощью свойства CSS background image.

Спасибо за чтение,

Анна из Дуомли

Сопутствующие показания 📖

Учебник по использованию анимированного CSS с примерами

Учебное пособие по созданию таблицы HTML

Граница CSS с примерами учебник

Анна Данилец

Анна Данилец окончила факультет управления бизнесом. В течение многих лет она получала солидный опыт в разработке клиентских и серверных интерфейсов, создавая программное обеспечение для известных ИТ-компаний. Ее опыт в области ИТ - это React.JS, Angular, React Native, Flutter, Node.JS и Nest.JS. В последние годы она вела бизнес для Duomly, уделяя особое внимание ИТ, а также интернет-маркетингу, дизайну и созданию контента, таким как ведение блогов и Youtube. В нерабочее время Анна ведет свой настоящий криминальный канал на YouTube, любит спорт, солнце и средиземноморскую кухню.

Подробнее об Анне Данилец

Если понравилось, делитесь и комментируйте!

Использование фоновых изображений со ссылками

Использование фоновых изображений со ссылками | Джордж Орнбо

Последнее обновление

Связывание значков со ссылками, на мой взгляд, может быть мощным дизайнерским приемом.С небольшим количеством CSS легко добавлять значки в ваши ссылки.

Приблизительное время чтения: 2 минуты

Оглавление

Чтобы применить значок к ссылкам в CSS, используйте фоновое изображение. Хотя вам следует экономно использовать значки в ссылках, значки могут значительно улучшить удобство использования сайта. В этом примере у нас есть ссылка, которая ведет на страницу записи журнала. Создайте значок с помощью Illustrator, Photoshop или вашего любимого программного обеспечения для обработки изображений. Убедитесь, что он соответствует размеру текста, рядом с которым появляется.Вот я сделал простой карандаш:

Разметка

В этом примере у нас есть простая ссылка в div

  
  

CSS

  # example-link a {
  отступ слева: 15 пикселей;
  фон: url (/images/examples/bglinks/pencil_icon.gif) 3px 1px без повтора;
}
  

Explanation:

Padding left - сдвигает текст от изображения. В зависимости от ширины вашего изображения вам понадобится больше или меньше отступов

Фон - здесь есть правила, связанные с URL-адресом фонового изображения

  • (/ images / examples / bglinks / Pencil_icon.gif) - это путь к изображению, которое вы хотите сделать своей иконкой.
  • 3px 1px - эти значения позиционируют фоновое изображение. Первое значение - это расстояние от фонового изображения слева от тега a, второе - расстояние от верха тега.
  • Без повтора указывает браузеру только показать изображение один раз.

Код в действии

Простой значок, применяемый к ссылке с помощью CSS. (Если вы читаете это в программе чтения новостей, вы не увидите изображения)

У вас есть обновления или предложения по этой статье? Вы можете отредактировать его здесь и отправить мне запрос на перенос.

Теги

Последние сообщения

Об авторе

Джордж Орнбо (George Ornbo) - инженер-программист из Бакингемшира, Англия.

Он является автором Sams Teach Yourself Go за 24 часа и Sams Teach Yourself Node.js за 24 часа. Его можно найти в большинстве обычных мест в виде фигур.

← http://shapeshed.com

Контент находится под лицензией Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)

Оптимизация фоновых изображений CSS для Интернета.Руководство по оптимизации баннеров HERO | Дмитрий Покидов | pixboost

Все примеры из этой статьи доступны на моем демонстрационном веб-сайте: www.midday.coffee

Давайте посмотрим, как мы можем реализовать баннер героя, используя необработанный HTML и CSS, , добавить правило background-image и сделать он удобен как для настольных компьютеров, так и для мобильных устройств.

Шаг 1. Разметка для примера ниже довольно проста и понятна. Мы создаем элемент

с class = "banner", и двумя вложенными элементами

в качестве заголовка и подзаголовка.

Шаг 2. Как видите, мы еще не установили изображение для нашего баннера. Для этого мы воспользуемся правилом CSS background-image :

Основные биты находятся в верхней части фрагмента:

  • background-image используется для установки URL фонового изображения,
  • background-size установлено значение «cover» , чтобы всегда масштабировать изображение для заполнения всего div,
  • height здесь необходимо, потому что элемент не имеет ничего не знаю о размерах изображения , поэтому мы должны установить их вручную.

Теперь мы можем поэкспериментировать с примером, чтобы увидеть, как он ведет себя, когда мы изменяем размер окна браузера. Как видите, баннер героя всегда растягивается на всю ширину экрана.

Шаг 3. Наконец, давайте сделаем оптимизированным для мобильных устройств , так как он занимает слишком много вертикального пространства и текст немного искажается.

В приведенном выше фрагменте мы используем медиа-запрос , который сообщает браузеру переопределить CSS баннера, когда ширина окна браузера меньше 576 пикселей.

Давайте погрузимся глубже и сделаем наше знамя героя настоящим героем!

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

В 2018 году 52,2 процента из всего трафика веб-сайтов по всему миру было создано через мобильных телефонов , по сравнению с на 50,3 процента в предыдущем году.

Statista.com

Подробнее о тестировании производительности изображений здесь .

Шаг 1. Во-первых, давайте посмотрим, как работает наш баннер героя. Два основных фактора, на которые следует обратить внимание, - это размер образа и время его загрузки .

Давайте воспользуемся Chrome Developer Tools , чтобы зафиксировать эти значения.

Чтобы открыть Инструменты разработчика, нажмите F12 в веб-браузере Chrome.

Затем перейдите на вкладку Сеть и установите дросселирование на Fast 3G , чтобы наши измерения не зависели от подключения к Интернету:

Измерение производительности с помощью инструментов разработчика Chrome

Теперь давайте обновим страницу и найдем изображение нашего баннера:

Измерение производительности с помощью инструментов разработчика Chrome

Интересующие нас значения находятся в столбцах «Размер» и «Время» .

Давайте перенесем их в таблицу, которая станет нашим отчетом об эффективности:

Отчет об эффективности для баннера Hero

Мы записываем значения для экранов настольных и мобильных устройств, так как мы ожидаем использовать адаптивные изображения для нашего баннера Hero.

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

Шаг 2. Пришло время оптимизировать фоновое изображение . В этой статье мы используем службу Pixboost, чтобы сэкономить время, но вы можете отказаться от оптимизации и изменения размера изображения вручную и загрузки их на свой хостинг.Имейте в виду, что Pixboost не только предоставляет функции изменения размера и оптимизации изображений, но также:

  • Поддержка формата следующего поколения - Webp
  • Ленивая загрузка
  • встроенный CDN для доставки изображения в браузер
  • Нет необходимости хранить разные варианты исходного изображения
  • Поддержка HTTP / 2

Шаг 3. Давайте обновим URL-адрес фонового изображения, чтобы оно было оптимизировано:

Оптимизация баннера Hero с помощью оптимизатора Pixboost

Вот как настроить URL-адрес : Интеграция на основе URL.

При желании вы можете изменить размер и оптимизировать изображение главного баннера с помощью другого программного обеспечения, такого как Photoshop или Gimp.

Шаг 4. Давайте еще раз проведем наш тест производительности, зафиксируем и обновим результаты:

Тестирование производительности
  • Как видите, мы только что сделали изображение на на 25 КБ легче , что на 31% .
  • Кроме того, используя CDN, мы сокращаем время загрузки на более чем на 1 секунду (34%).

Разве не впечатляет ?! Давайте продолжим!

Шаг 5. Тем не менее, у нас остались те же результаты для настольных компьютеров и мобильных устройств. В этом нет особого смысла, учитывая, что экраны настольных компьютеров намного больше мобильных.

Давайте это исправим.

Из нашего медиа-запроса, который мы представили ранее, мы видим, что максимальная ширина экрана составляет 576 пикселей. Кроме того, мы установили высоту нашего баннера на 400 пикселей, поэтому максимальный размер изображения будет 576x400 пикселей. Это означает, что это максимальный размер, который нам необходим для обслуживания всех мобильных устройств.

Все, что нам нужно сделать, это добавить отдельное свойство background-image к нашей мобильной точке останова CSS:

Мы используем операцию «fit» , которая изменит размер изображения до точного размера.Давайте посмотрим, как теперь выглядит наша производительность для настольных компьютеров и мобильных устройств:

Ура!

Нам удалось уменьшить размер изображения до 28,7 кб и время до 725 мс . Это отличная новость для пользователей нашего сайта!

Подробнее об использовании Pixboost здесь: Обзор инструмента оптимизации Pixboost.

Это наш окончательный отчет о производительности с результатами :

Фоновые изображения CSS - это мощный инструмент, который вы можете использовать для создания изображений на вашем веб-сайте.Это особенно удобно в случаях, когда вам нужно плавного макета, и элементов наложения поверх ваших изображений.

Говоря, что вам все еще нужно следить за производительностью ваших изображений .

Вы можете использовать такие решения, как Pixboost, для значительного повышения производительности ваших изображений наряду с производительностью веб-сайта , коэффициентом конверсии и SEO-рейтингом .

В следующей статье мы объясним, как можно еще больше повысить производительность фоновых изображений с помощью Pixboost.js с функцией отложенной загрузки .

фоновых изображений | HTML Dog

Чтобы углубиться в глубину, сокращенное свойство background может иметь дело со всеми основными аспектами манипулирования фоновым изображением.

 
тело {
  фон: белый URL (http://www.htmldog.com/images/bg.gif) без повтора вверху справа; 
}
  

Это объединяет следующие свойства:

  • background-color , с которым мы сталкивались раньше.
  • background-image , где находится само изображение.
  • background-repeat , так изображение повторяется. Его значение может быть:
    • repeat , эквивалент эффекта «плитки» по всему фону,
    • repeat-y , повторение по оси Y, вверху и внизу,
    • repeat-x (повторение по оси x, рядом) или
    • no-repeat (показывает только один экземпляр изображения).
  • background-position , который может быть верхний , центральный , нижний , левый , правый , длина, процентное соотношение или любая разумная комбинация, например верхний правый .

Рекламируйте здесь! На давнем, начитанном и уважаемом ресурсе веб-разработки.

Неповторяющийся фон в правом верхнем углу.

На самом деле его также можно использовать для указания некоторых других функций фона, в частности, прикрепления, клипа, происхождения и размера (подробности см. В справке по свойству background ), но давайте пока не будем увлекаться - цвет, изображение, повтор и положение - безусловно, самые фундаментальные аспекты, которыми вы хотели бы манипулировать чаще всего.

Фоновые изображения можно использовать в большинстве HTML-элементов - не только для всей страницы (тела), но и для простых, но эффективных результатов. Например, фоновые изображения используются на этом веб-сайте как маркеры в списках, как увеличительное стекло в поле поиска и как значки в верхнем левом углу некоторых заметок, например этой.

Почему я не могу редактировать и изменять фоновое изображение? - База знаний BlueConic

Чтобы иметь возможность редактировать изображение, оно должно быть частью HTML-источника позиции, которую вы редактируете.Хотя в этом есть смысл, это не всегда очевидно. Например, с помощью CSS (каскадной таблицы стилей) изображения могут отображаться в местах, где фактический исходный HTML-код вообще не содержит изображения.

Вы можете отредактировать исходный HTML-код позиции, чтобы увидеть, не происходит ли каких-либо уловок CSS с помощью редактора HTML.

Например, если HTML выглядит так ...

 

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

... и вы можете только редактировать текст, тогда, очевидно, магический класс "background-image" заставляет изображение появляться позади текста.

В приведенном выше примере, если вы хотите изменить фактическое изображение, измените атрибут «src» тега «img» на URL-адрес другого изображения. Просто убедитесь, что URL-адрес изображения общедоступен, другими словами, изображение должно быть загружено на общедоступный веб-сайт.

Иногда в исходном HTML-коде вообще нет тега img:

 

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

В этом случае изображение доставляется через класс CSS "background-image", а URL-адрес изображения является частью самой таблицы стилей. BlueConic не может редактировать саму таблицу стилей, поэтому в этом случае нет возможности редактировать изображение.

Суммируем:

  • Если вы не можете редактировать изображение с помощью встроенного редактора, попробуйте редактор HTML.
  • В редакторе HTML вы не можете загрузить изображение, поэтому вам придется использовать URL-адрес существующего изображения.
  • Если редактор HTML не содержит URL-адреса изображения для редактирования, изображение, вероятно, обслуживается через CSS и не может быть отредактировано.

HTML img vs CSS background-image

Итак, вы смотрите на дизайн-композицию с изображением в ней и пытаетесь выбрать между использованием HTML & lt; img & gt; или фоновое изображение CSS.

Сначала вы можете подумать: «Это вообще имеет значение?»

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

Но вы здесь, поэтому вы хотите принять обоснованное решение .

Вот пошаговый процесс выбора между ними.

Шаг 1. Специальные возможности

Фоновые изображения CSS могут быть видны, но представляют проблемы с доступностью.

Например, & lt; img & gt; Теги могут добавлять замещающий текст и атрибут заголовка, которые могут быть выбраны программами чтения с экрана. Это важно не только для конечных пользователей, но и для индексации в результатах поиска Google. Вот выдержка из официального центрального блога Google для веб-мастеров об умном использовании альтернативных атрибутов:

Поскольку робот Googlebot не видит изображения напрямую, мы обычно концентрируемся на информации, представленной в атрибуте alt. Не стесняйтесь дополнять атрибут «alt» словом «title» и другими атрибутами, если они представляют ценность для ваших пользователей!

Хотите доступности и лучшего SEO? Используйте & lt; img & gt; тег.

Остальные соображения относятся к улучшениям визуального дизайна изображений как чисто-визуального дизайна.

Шаг 2. Фоновое изображение CSS и производительность

Если вы ссылаетесь на один и тот же URL-адрес изображения, технически запрос будет таким же, поэтому время, необходимое для загрузки, должно быть одинаковым. Однако проблема производительности действительно сводится к тому, когда делается запрос.

Если у вас есть группа больших фоновых изображений, объявленных в вашем CSS, браузеру потребуется больше времени, чтобы проанализировать файл CSS и извлечь изображения, что задержит загрузку всей страницы.

с & lt; img & gt; , запросы выполняются по мере анализа HTML, поэтому любой контент, предшествующий тегу в документе, будет информацией, которую пользователи могут начать читать.

Кроме того, встроенные изображения ( & lt; img & gt; или & lt; picture & gt; ) могут использовать такие инструменты, как заливка изображений и отложенная загрузка, для еще большего повышения производительности.

Шаг 3. Возможности CSS для обработки фонового изображения

Если вы используете один или несколько относительно небольших файлов изображений для улучшения эстетики, а преимущества в производительности незначительны, рассмотрите варианты манипуляции, которые у вас есть с помощью CSS.

Фоновые изображения могут использоваться вместе с background-color , background-repeat , background-attachment , background-position и background-blend-mode .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *