<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: auto;
                padding: 0;
            }
            #a1{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                margin-top: 30px;
                border-radius: 15px 20%;
                box-shadow: 5px 10px;
            }
            #a2{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                background-image: url(../img/1.jpg);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-top: 30px;
            }
            #a3{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                background-image: url(../img/1.jpg);
                background-position: bottom;
                background-repeat: no-repeat;
                margin-top: 30px;
            }
            #a4{
                width: 400px;
                height: 400px;
                border: 1px solid red;
                background-image: url(../img/1.jpg),url(../89ca0e54-6537-4aa4-8ac6-be6ec29b6636.jpg);
                background-repeat: no-repeat;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="a1">
            
        </div>
        <div id="a2">
            
        </div>
        <div id="a3">
            
        </div>
        <div id="a4">
            
        </div>
    </body>
</html>

CSS背景使用，引入、尺寸、平铺、定位、多重背景的更多相关文章

  1. 笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明

    第4章  背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...

  2. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  3. css如何将图片横向平铺？

    在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...

  4. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  5. css — 定位、背景图、水平垂直居中

    目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...

  6. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  7. CSS 第四天 多重背景 变形 过渡

    背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...

  8. [ATL/WTL]_[0基础]_[CBitmap复制图片-截取图片-平铺图片]

    场景: 1.当你须要截取图片部分区域作为某个控件的背景. 2.须要平铺图片到一个大区域让他自己主动放大时. 3.或者须要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateC ...

  9. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

  10. 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）

    默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...

随机推荐

  1. 历年真题 未完成（Noip 2008 - Noip 2017）

    Noip 2008 :全部 Noip 2009 :全部 Noip 2010 :AK Noip 2011 :AK Noip 2012 : Vigenère 密码,国王游戏,开车旅行 Noip 2013 ...

  2. EL表达式中，param和requestScope的区别

    在看param和requestScope之前,不妨先了解下在java下request的情况: 1. request对象通常用来接收客户端提交到服务端的数据,如:在servlet或者action中可以用 ...

  3. luogu 4884 多少个1 (BSGS)

    很有意思的一个签到题 然而考场上并没有切掉 $1111...111=K(mod\;m)$ $10^{x}=9K+1(mod\;m)$ 用$BSGS$求解即可 模数爆了$int$,需要快速乘,然而模数是 ...

  4. CentOS 笔记（四） Jexus部署相关

    ①设置jexus 为服务 cd /lib/systemd/system/ sudo vi jexus.service #注意 jexus 实际路径 [Unit] Description=jexus A ...

  5. ArcGIS中标格乱码？？

    安装好ArcGIS之后导入地图层之后,显示 label 时中文乱码,但是导出数据显示正常 这是 ArcGIS 安装环境编码的问题,只需要修改一下配置文件即可 打开 cmd 命令窗口 reg add H ...

  6. PHP学习总结（4）——PHP入门篇之PHP计算表达式

    计算表达式 不同于HTML和CSS,在php中我们可以做计算,比如我们写入echo 12*3计算机会计算出结果36.如下代码: <?php echo 12*3;?>

  7. sso 系统分析

    一.什么是 sso 系统 SSO 英文全称 Single Sign On,单点登录.SSO 是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他 ...

  8. ioremap映射函数

    一.ioremap() 函数 Linux在io.h头文件中声明了函数ioremap(),用来将I/O内存资源的物理地址映射到核心虚地址空间(3GB-4GB)中(这里是内核空间),原型如下: 1.ior ...

  9. Elasticsearch 三种分页方式

    from + size 浅分页 "浅"分页可以理解为简单意义上的分页.它的原理很简单,就是查询前20条数据,然后截断前10条,只返回10-20的数据.这样其实白白浪费了前10条的查 ...

  10. rails 安装后调整gem sources 地址

    rails 安装后调整gem sources 地址 使用https会有认证的问题: 移除原有的: gem sources --remove https://rubygems.org/ 查看当前的: g ...