<!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. new String(getBytes(ISO-8859-1),UTF-8)中文编码避免乱码

    byte[] b_gbk = "深".getBytes("GBK"); byte[] b_utf8 = "深".getBytes(" ...

  2. 纯css3实现箭头、关闭按钮旋转效果

    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一.但是css3可能要求浏览器执行很多的工作来完成这个动 ...

  3. 手机上怎么去掉a 标签中的img点击时的阴影？

    添加: <style type="text/css"> a { -webkit-tap-highlight-color: transparent; -webkit-to ...

  4. 使用maven创建web项目时后面多出来Maven Webapp如何删除

    类似这样: 解决办法:

  5. 【codeforces 807B】T-Shirt Hunt

    [题目链接]:http://codeforces.com/contest/807/problem/B [题意] 你在另外一场已经结束的比赛中有一个排名p; 然后你现在在进行另外一场比赛 然后你当前有一 ...

  6. CF369E. ZS and The Birthday Paradox

    /* cf369E. ZS and The Birthday Paradox http://codeforces.com/contest/711/problem/E 抽屉原理+快速幂+逆元+勒让德定理 ...

  7. 洛谷 U3346 A1-偶回文数

    U3346 A1-偶回文数 题目背景 方方方很喜欢回文数,于是zzq就出了一道关于回文数的题目. 因为偶回文数比较简单,所以方方方就把它放在了第一题... 题目描述 我们定义一个长度为偶数的回文数叫做 ...

  8. Visual C++ 经常使用快捷键

    大写和小写 Ctrl+Shift+U: 所有变为大写 Ctrl+U: 所有变为小写 凝视 Ctrl+K+Crtr+C: 凝视选定内容  Ctrl+K+Crtr+U: 取消选定凝视内容 折叠 折叠代码: ...

  9. 源码高速定位工具-qwandry

    https://github.com/adamsanderson/qwandry qwandry 能高速定位到我们须要找到 库文件, 项目 的工具. Ruby中实现高速定位的方法有好多种.我知道的有三 ...

  10. Foundation框架经常使用数据类型和NSAutoreleasePool自己主动释放池解析

    第一.NSAutoreleasePool自己主动释放池解析 1.自己主动释放池的物理实现 自己主动释放池用栈来实现.当你创建一个新的自己主动释放池是,会压栈到栈顶.接受autorelease消息的对象 ...