<!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. 企业级任务调度框架Quartz(9) Quartz之作业触发器Trigger

    前序:      我们已经大概对Quartz的基本有了一个大概的认识:现在我们将要逐渐对Quartz的各个重要组件进行学习:前面已经对job进行了详细讲解,现在我们来认识下它的一个重要兄弟,没有它,作 ...

  2. Steamroller FreeCodeCamp

    function steamroller(arr) { // I'm a steamroller, baby var resultArr = []; for(var i = 0; i < arr ...

  3. Redmine 甘特图导出 PDF 和 PNG 中文乱码问题

    Redmine使用了RMagick来处理图片,fpdf处理PDF,并在调用时设定了字体PDF中文字体 redmine 中关于PDF字体设置的代码 case pdf_encoding           ...

  4. JS 作业

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 【深入理解Java虚拟机】自动内存管理机制——内存区域划分

      Java与C++之间有一堵有内存动态分配和垃圾收集技术所围成的"高墙",墙外面的人想进去,墙里面的人却想出来.C/C++程序员既拥有每一个对象的所有权,同时也担负着每一个对象生 ...

  6. php设置cookie和删除cookie

    设置cookie Example : - set - <?php setcookie( "name", "value", "future_tim ...

  7. [bzoj3743 Coci2015] Kamp（树形dp）

    传送门 Description 一颗树n个点,n-1条边,经过每条边都要花费一定的时间,任意两个点都是联通的. 有K个人(分布在K个不同的点)要集中到一个点举行聚会. 聚会结束后需要一辆车从举行聚会的 ...

  8. [模板]Link-Cut-Tree

    LCT模板. Orz了一下大佬的板子 Orz UPD(10.19):好像理解LCT了... LCT相当与把一个树剖分,分成实边和虚边,对于每一个实链用一个splay维护一下它的深度,然后当你想进行操作 ...

  9. google浏览器中 查看记住的账号和密码

    对于一个有“健忘症”的人来说,密码形同虚设..设置了就忘记,每次登陆都要重新设置密码... 然后,无意中发现,谷歌浏览器点过一次记住密码后,竟然可以明文查看账号和密码!! 步骤: 1.打开谷歌浏览器, ...

  10. POJ 2184

    简单的01背包,把S看体积,把F看价值,把它们变正数处理就可以了.在处理负数时,因为减一个负数相当于加一个,所以要从前往后. #include <iostream> #include &l ...