CSS——背景样式、雪碧图、渐变色

最新推荐文章于 2023-10-12 21:03:03 发布

猎户李铁柱

最新推荐文章于 2023-10-12 21:03:03 发布

阅读量395

点赞数 1

分类专栏： html 文章标签： css 前端 html

本文链接：https://blog.csdn.net/asdfg2047/article/details/125562123

版权

1、背景

1: background-color 设置背景颜色

2:background-image来设置背景图片

- 语法：background-image:url(相对路径);

-可以同时为一个元素指定背景颜色和背景图片，

这样背景颜色将会作为背景图片的底色

-图片在元素中的位置

如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

如果背景图片大于元素，默认会显示图片的左上角

如果背景图片和元素一样大，则会将背景图片全部显示

3:background-repeat用于设置背景图片的重复方式

可选值：

repeat，默认值，背景图片会双方向重复（平铺）

no-repeat ，背景图片不会重复，有多大就显示多大

repeat-x，背景图片沿水平方向重复

repeat-y，背景图片沿垂直方向重复

4:background-position可以调整背景图片在元素中的位置

背景图片默认是贴着元素的左上角显示

可选值：

该属性可以使用 top right left bottom center中的两个值

来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量，

第一个值是水平偏移量

- 如果指定的是一个正值，则图片会向右移动指定的像素

- 如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量

- 如果指定的是一个正值，则图片会向下移动指定的像素

- 如果指定的是一个负值，则图片会向上移动指定的像素

<!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>

background-clip

设置背景的范围

可选值：

border-bo

最低0.47元/天解锁文章

猎户李铁柱

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS——背景样式、雪碧图、渐变色

1: background-color 设置背景颜色2:background-image来设置背景图片 - 语法：background-image:url(相对路径); -可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色 -图片在元素中的位置如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素如果背景图片大于元素，默认会显示图片的左上角如果背景图片和元素一样大，则会将背景图片全部显示
复制链接

扫一扫