CSS背景使用,引入、尺寸、平铺、定位、多重背景
<!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背景使用,引入、尺寸、平铺、定位、多重背景的更多相关文章
- 笔记《精通css》第4章 背景图像,平铺方式,背景定位,圆角框,投影,不透明
第4章 背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...
- CSS背景100%平铺 浏览器缩小背景显示不全解决办法
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...
- css如何将图片横向平铺?
在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- CSS 第四天 多重背景 变形 过渡
背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...
- [ATL/WTL]_[0基础]_[CBitmap复制图片-截取图片-平铺图片]
场景: 1.当你须要截取图片部分区域作为某个控件的背景. 2.须要平铺图片到一个大区域让他自己主动放大时. 3.或者须要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateC ...
- CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)
默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...
随机推荐
- K3 新单到老单关联字段的添加
新单到老单字段的添加分为两种: 一种为文本字段信息的关联,新单与老单字段的信息均为文本字段: 另一种为基础资料信息的关联,新单与老单均为基础资料字段信息. K3 WISE 11.0中存储老 ...
- python实现定时发送消息
#!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/8/21 15:59# 自动发送消息from threadin ...
- 自动化测试之firebug、firepath、IDE的使用
1firebug安装-firefox添加组件-firebug 如图 firepath依赖于firebug 展示路径用,安装和firebug一样
- laravel使用JWT做API认证
最近项目做API认证,最终技术选型决定使用JWT,项目框架使用的是laravel,laravel使用JWT有比较方便使用的开源包:jwt-auth.php 后端实现JWT认证方法 使用composer ...
- 把Dev的excel表格用clientdataset保存到数据库中。
网上很多,如何把图片.word.excel等保存到数据库中.可是自己就是死活出现异常,百思不得其解.原因找到了,为什么没有去弄明白: 在sql server字段类型中,我把存储字段设成binary,结 ...
- 使用IDEA 中 实现springboot 热部署 (spring boot devtools版)
第一步:添加springboot的配置文件 首先我先贴出我的配置 添加依赖包 <!-- spring boot devtools 依赖包. --> <dependency> & ...
- easyui获取当前点击对象tabs的title和Index
观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.t ...
- daning links 系列
1001 Easy Finding POJ-3740 1002 Power Stations HDOJ-3663 1003 Treasure Map ZOJ-3209 1004 Lamp HDOJ-2 ...
- spring的启动过程就是创建ioc容器的过程
1. spring简介 spring的最基本的功能就是创建对象及管理这些对象之间的依赖关系,实现低耦合.高内聚.还提供像通用日志记录.性能统计.安全控制.异常处理等面向切面的能力,还能帮我们管理最头疼 ...
- 在linux環境下安裝jprofiler_linux_8_0_2.sh
1.安装jprofiler_linux_8_0_2.sh chmod+x jprofiler_linux_8_0_2.sh ./jprofiler_linux_8_0_2.sh –c 安装过程略..差 ...