<!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. 人工智能 Python 入门视频

    Python, 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年发明,第一个公开发行版发行于1991年.       Python是纯粹的自由软件, 源代码和解 ...

  2. 安装和启动Elasticseach

    1.在windows上安装和启动Elasticseach 1.安装JDK,至少1.8.0_73以上版本,java -version2.下载和解压缩Elasticsearch安装包.Elasticsea ...

  3. Python数据分析4------------数据变换

    1.简单变换: 开方.平方.对数等 2.数据规范化: (1)离差标准化(最小最大标准化):消除量纲(单位)影响以及变异大小因素的影响. x1=(x-min)/(max-min) 代码:data1=(d ...

  4. Nginx学习（1）--- 介绍与安装

    1.基础介绍 常用功能 1.HTTP服务 动静分离.WEB缓存.虚拟主机设置.URL Rewrite 2.负载均衡 3.反向代理 4.正向代理 5.邮件服务器 优点 高扩展.高可用.支持高并发.低资源 ...

  5. 查看eclipse的安装路径

    在桌面上快捷方式右键  点击属性  起始位置便是.

  6. MYSQL数据的安装、配置

    linux安装mysql服务分两种安装方法: 1.源码安装,优点是安装包比较小,只有十多M,缺点是安装依赖的库多,安装编译时间长,安装步骤复杂容易出错. 2.使用官方编译好的二进制文件安装,优点是安装 ...

  7. CF409C Magnum Opus

    CF409C Magnum Opus 题意翻译 题目背景 愚人节题目,题面似乎是一位名叫Nicolas Flamel的炼金术士用拉丁文写的某种物质的配方,结合谷歌尝试翻译了一下: 吾友: 哲人石所言不 ...

  8. Windows-命令窗口-强制关机命令

    Windows +R CMD  命令行窗口shutdown -s -f -t 以上参数中的-s代表关机,-f表示强制关闭所有应用程序,-t 00代表不用等待立即执行(时间以秒计算,把时间改长就变成了定 ...

  9. UML基本架构建模－－获取类

     Getting Started 開始 Modeling a system involves identifying the things that are important to your p ...

  10. 折腾开源WRT的AC无线路由之路-5

    -在Mac上设置无password连接SSH 1. 生成SSH密钥对 <pre name="code" class="html">ssh-keyge ...