<!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. 07 Django组件-中间件

    中间件 方式一:函数式:中间件[middleware],也叫钩子方法[钩子函数],hook Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Djang ...

  2. 路飞学城Python-Day59(第五模块复习题)

    HTML div标签是块级标签,单独一行,可以作为其他标签的容器,没有特定含义 span是内联标签,可以作为文本内容的容器,没有特定含义 1. 查询一下对div和span标签的理解 不同的标签有自己含 ...

  3. WSDL详解(一)

    WSDL文档使用web服务描述语言来定义服务. 文档包括逻辑(抽象)部分和具体部分. 抽象部分用于定义独立于实现的数据类型和消息,具体部分定义一个endpoint如何实现一个可以与外界进行交互的服务. ...

  4. WEBGL学习【八】模型视图投影矩阵

    <!--探讨WEBGL中不同图形的绘制方法:[待测试2017.11.6]--> <!DOCTYPE HTML> <html lang="en"> ...

  5. 我的第一个arcgis地图应用

    步骤: 1.设置一个基本的html文档 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  6. 邓_ Mysql·笔记

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.MySQL是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relation ...

  7. Centos文件查看命令字符

    文件(夹)查看类命令 ls--显示指定目录下内容 说明:ls 显示结果以不同的颜色来区分文件类别.蓝色代表目录,灰色代表普通文件,绿色代表可执行文件,红色代表压缩文件,浅蓝色代表链接文件. -a--- ...

  8. 00074_Array类

    1.Array类的概述 此类包含用来操作数组(比如排序和搜索)的各种方法.需要注意,如果指定数组引用为 null,则访问此类中的方法都会抛出空指针异常NullPointerException. 2.常 ...

  9. Python模块路径查找

    本文主要介绍如何查找某个Python模块的绝对路径,下面以opencv模块的查找为例.有两种方法 第一种方法 打开一个终端,输入 python -v import cv2 最后一行显示如下 第二种方法 ...

  10. 使用Service Bus Topic 实现简单的聊天室

    创建Service Bus能够參照: https://azure.microsoft.com/en-gb/documentation/articles/service-bus-dotnet-how-t ...