css-背景设置

背景处理

默认加载原图,图片左上角和标签的左上角对齐

图片

  • 设置背景图片:
background-image: url(3.jpg);
  • 设置背景图片加载大小,百分比(像素也可以):
background-size: 100% 100%;
  • 设置图片不重新加载(也可以只在x方向和y方向上加载填充 background-repeat: repeat-y;)
background-repeat: no-repeat;
  • 设置图片的位置(即是背景图片中心在标签的位置),百分比,像素都可以:
background-position: 30% 50%

设置图片


背景颜色(图片)-线性渐变

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
颜色大于等于2个


  • 线性渐变:
background-image: linear-gradient(red,blue)
  • 设置渐变的宽度:
background-image: linear-gradient(red 50%,blue)
  • 设置从哪个方向开始渐变:
background-image: linear-gradient(to right,red blue)
  • 设置角度;
background-image: linear-gradient(10deg red ,blue)
  • 径向渐变:(用法和线性渐变一样)
background-image: radial-gradient(red,blue);

从大图中抠小图:

示意图:

这里写图片描述

一个实例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景图片</title>
        <style media="screen">
            div{
                /*设置一个小框,用于加载小图*/
                height: 100px;
                width: 100px;

                border: 2px solid red;

                background-image: url(144.jpg);
                /*设置图片不重新加载*/
                background-repeat: no-repeat;
                /*设置这个图片的大小*/
                background-size: 200px 200px;
                /*设置这个图片偏移情况*/
                background-position: -100px -100px;


            }
        </style>
    </head>
    <body>
        <div class="">
        </div>
    </body>
</html>

原图:
这里写图片描述
抠出来的小图:
这里写图片描述


如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
防止这种滚动

background-attachment:fixed
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值