1: background-color установить цвет фона
2: background-image для установки фонового изображения
- Синтаксис: background-image:url (относительный путь);
- Вы можете указать как цвет фона, так и фоновое изображение для элемента одновременно,
Этот цвет фона будет использоваться в качестве цвета фона фонового изображения.
- положение изображения внутри элемента
Если фоновое изображение меньше, чем размер элемента, фоновое изображение будет мозаичным, чтобы заполнить элемент по умолчанию.
Если фоновое изображение больше, чем элемент, по умолчанию будет отображаться левый верхний угол изображения.
Если фоновое изображение имеет тот же размер, что и элемент, фоновое изображение будет отображаться целиком.
3: background-repeat используется для установки режима повтора фонового изображения.
Дополнительные значения:
повторение, значение по умолчанию, фоновое изображение будет повторяться в обоих направлениях (плитка)
no-repeat , фоновое изображение не будет повторяться и будет отображаться таким большим, как оно есть.
repeat-x, фоновое изображение повторяется по горизонтали
Repeat-y, фоновое изображение повторяется по вертикали
4: background-position может регулировать положение фонового изображения в элементе
Фоновое изображение по умолчанию отображается в левом верхнем углу элемента.
Дополнительные значения:
Это свойство может использовать два значения в правом верхнем углу слева внизу по центру
указать местоположение фонового изображения
вверху слева вверху слева
внизу справа внизу справа
Если указано только одно значение, второе значение по умолчанию равно центру.
Вы также можете указать два смещения напрямую,
Первое значение — горизонтальное смещение.
- Если указано положительное значение, изображение будет сдвинуто вправо на указанные пиксели
- Если указано отрицательное значение, изображение будет сдвинуто влево на указанные пиксели
Второе — вертикальное смещение.
- Если указано положительное значение, изображение будет сдвинуто вниз на указанные пиксели
- Если указано отрицательное значение, изображение будет сдвинуто вверх на указанный пиксель
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
margin: 0 auto;
/* 需求1:添加背景色 */
background-color: blueviolet;
/* 需求2:添加背景图片 */
background-image: url(./img/gaitubao_小图_png.png);
/* 需求3:虽然图小，但图片我只要一张*/
background-repeat: no-repeat;
/* 需求4:调整背景图片在元素中的位置 */
background-position:-50px -50px;
}
</style>
</head>
<body>
<div class="box1">
嗣专一冇纯即，助也。jwdjdjfasadf
</div>
</body>
</html>5.фоновый клип
Установите диапазон фона
Дополнительные значения:
border-box Значение по умолчанию, цвет фона будет отображаться под границей
Фон отступа не будет отображаться на границе, только в области содержимого и отступов.
фон содержимого окна отображается только в области содержимого
6:фоновое происхождение
Установите источник вычисления смещения фонового изображения, используемого в сочетании со смещением
padding-box рассчитывается по внутреннему расстоянию. Значение по умолчанию
Смещение фонового изображения блока содержимого вычисляется из области содержимого.
border-box вычисляет смещение от границы
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 300px;
width: 300px;
padding: 20px;
border: 20px red double;
margin: 0 auto;
/*设置一个背景颜色*/
background-color: #bfa;
background-clip: content-box;
background-image: url(./img/gaitubao_小图_png.png);
background-repeat: no-repeat;
background-position: 100px 100px;
background-origin: border-box;
}
.box2{
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<!-- <div class="box2"></div> -->
</div>
</body>
</html>7: background-size установить размер изображения
параметр:
Первое значение: ширина
Второе значение: высота
Если записано только одно, второе значение по умолчанию является автоматическим.
Пропорция изображения обложки остается неизменной, а элементы коробки закрыты
содержат Пропорции изображения остаются неизменными, а элементы изображения полностью отображаются
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 300px;
width: 300px;
background-color: green;
background-image: url(./img/大图2.webp);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
height: 300px;
width: 300px;
/*设置一个背景颜色*/
/*background-color: #bfa;*/
/*设置一个背景图片*/
/*background-image: url(img/3.png);*/
/*设置背景不重复*/
/*background-repeat: no-repeat;*/
/*设置背景图片的位置*/
/*background-position: center center;*/
/* 设置图片大小 */
/* background-size:cover ; */
/* 设置图片偏移的原点 */
/* background-origin: padding-box; */
/* 设置背景的范围 */
/* background-clip: padding-box; */
/*
background
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前谁在后都行
也没有数量的要求，不写的样式就使用默认值
-background-size要写在background-position后面
*/
background: #bfa url("./img/小图2.webp") center/200px no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>2. Изображение спрайта
1. Технология интеграции изображения (CSS-Sprite)
преимущество:
1 Чтобы объединить несколько изображений в одно изображение, браузеру нужно отправить только один запрос, и он может загружать несколько изображений одновременно.
Повысьте эффективность доступа и улучшите взаимодействие с пользователем.
2 Объедините несколько изображений в одно изображение, уменьшите общий размер изображения, увеличьте скорость запроса и улучшите взаимодействие с пользователем.
2. Шаги по использованию Sprite
1: Сначала определите значок, который будет использоваться
2: Измерьте размер значка
3: Создайте элемент на основе измерения
4: Установите изображение спрайта в качестве фона элемента
5: Установите смещение для отображения правильного изображения
Леопард в трубе
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
a {
display: block;
width: 250px;
height: 78px;
background-color: pink;
background-image: url(./img/亚马逊.png);
}
a:hover{
background-position: 0 -80px;
}
a:active{
background-position: 0 -660px;
}
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>3. Градиент цвета
Градиент: некоторые сложные фоновые цвета можно задать с помощью градиентов, и можно реализовать эффект перехода от одного цвета к другому цвету.
Градиент — это картинка, заданная фоновым изображением
необязательное значение
1: линейный градиент (ориентация, цвет 1, цвет 2) ['ɡreidiənt]
Линейный градиент, при котором цвет меняется по прямой линии.
Параметр 1: Указывает ориентацию (необязательное значение, если не указано, по умолчанию — вниз)
(1) влево, вправо, вниз, вверх
(2) xxxdeg означает угол, градус, будет более гибким
(3) поворот означает круг на 0,5 оборота
Параметр 2: Цвет 1
Параметр 3: Цвет 2
Уведомление:
Можно написать несколько цветов.По умолчанию цвета разделены поровну
Вы также можете вручную указать распределение градиента
фоновое изображение: линейный градиент (красный 50px, желтый);
За цветом непосредственно следует пропорция
2: повторяющийся линейный градиент ()
Линейные градиенты, которые можно замостить
фоновое изображение: повторяющийся линейный градиент (желтый 0 пикселей, красный 50 пикселей);
Параметры такие же, как и у linear-gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
/* background-color: red; */
/* background-image: linear-gradient(red 20px,yellow); */
background-image: repeating-linear-gradient(red 10px,yellow 20px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>4. Радиальный градиент
1:radial-gradient() ['reidiəl] ['ɡreidiənt]
Градиент меридиана (воздействие радиации)
По умолчанию центр круга рассчитывается на основе формы элемента.
квадратный круглый
прямоугольный овал
Параметр 1: форма центра круга
(1) круг, эллипс,
(2) Установите размер в позиции ==> пиксель 1 пиксель 2 в 0px 0px
фоновое изображение: радиальный градиент (100 пикселей 100 пикселей при 100 пикселей 0 пикселей, красный, желтый);
Параметр 2: Цвет 1
Параметр 3: Цвет 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 200px;
/* background-image: radial-gradient(red,yellow); */
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>