【CSS3】背景

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div>中国</div>

     <div id="div2"></div>

     <img src="img/草5.jpg">

     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

     让屏幕超过一屏产生滚动条。

 </body>

 </html>

 div{

     width: 100px;

     height: 100px;

     /*background: red url(img/鱼2.jpg) repeat-x;*/

     /*background-color: green;*/

     background-image: url(img/鱼2.jpg);

     background-repeat: ;/*设置图片如何重复：默认repeat，可设no-repeat，repeat-x，repeat-y，round*/

     background-position: ;/*此属性要求background-repeat设置成no-repeat才有效。默认左上，left、rigth、center、bottom、top两两组合使用，若只有一个则第二个值默认为center。x%y%水平垂直位置，0%0%左上，100%100%右下，若只有一个百分值，则另一个默认50%。xy，单位像素或em，0px0px左上，只有一个值只第二个值为50%*/

 }

 body{

     /*background: url(img/草3.jpg) no-repeat;*/

     /*background-attachment: fixed;*//*默认scroll随屏幕一起滚动，可设fixed*/

     background-size: /*500px*//*50%*//*cover*/contain;/*若只设置一个则为宽，高会根据原图比例调整。百分比为背景区别的百分比，非原图的比例缩放。cover保证原图宽高比横竖方向扩充整个背景可能会有某个方向超出区域被切掉；contain保证原图比例，使横竖其中一个扩充到就完成。*/

 }

 #div2{

     width: /*300px*/150px;

     height: /*200px*/100px;

     background: rgba(255,125,0,0.3);

     margin: 50px;

     padding: 60px;

     border: 20px groove rgba(100,30,15,0.5);

     background: url(img/草5.jpg) no-repeat;

     /*background-origin: content-box;*//*border-box左上角对齐到外边框；默认值padding-box左上角对齐到内边框；content-box左上角对齐到内容边框*/

     background-origin: border-box;

     background-clip: content-box;/*默认border-box从外边框开始剪切，外边框内都被保留。一般配合background-origin: border-box容易看出效果，从哪里显示，从哪里裁剪。padding-box从内边框开始裁剪。content-box从内容边框开始裁剪。*/

 }

【CSS3】背景的更多相关文章

CSS3背景温故
1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...
css3 背景记
css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...
CSS自学笔记（11）:CSS3背景和边框
CSS3 背景在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
第七十九，CSS3背景渐变效果
CSS3背景渐变效果学习要点: 1.线性渐变 2.径向渐变本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一．线性渐变 linear-gradi ...
从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
css3背景颜色渐变属性兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
[转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
CSS3背景制作导航菜单综合练习题
CSS3背景制作导航菜单综合练习题小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果任务 1.制作导航圆角提示:使用border-radius实现圆角 2.制作导航立体风格提示:使用 ...
css3-3 css3背景样式
css3-3 css3背景样式一.总结一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

随机推荐

Spring Boot中采用Mockito来mock所测试的类的依赖（避免加载spring bean，避免启动服务器）
最近试用了一下Mockito,感觉真的挺方便的.举几个应用实例: 1,需要测试的service中注入的有一个dao,而我并不需要去测试这个dao的逻辑,只需要对service进行测试.这个时候怎么办呢 ...
基于Spring开发的一个BIO-RPC框架(对新人很友好)
PART1:先来整体看下项目的构成其中bio-rpc-core就是所谓的rpc框架 bio-rpc-example-client即所谓的服务调用方(你的项目中想要调用服务的地方) bio-rpc-e ...
用StringBuilder和StringBuffer实现的Unicode解码方法的比较（Java）
初衷是用正则来写一个Unicode字符串转码的方法,一开始是打算结合StringBuilder写的,但是看到jdk7的Matcher.appendReplacement文档中一段示例代码用了Match ...
java线程相关
java线程相关 java 线程 1 线程的状态 This is an example of UML protocol state machine diagram showing thread sta ...
linux expect自动登陆远程服务器批量管理服务器
#!/usr/bin/expect set ipaddress [lindex $argv 0] set passwd [lindex $argv 1] set timeout 3 spawn ssh ...
shell脚本案例
1,写一个循环,ping整个子网的ip. 使用while循环 #!/bin/bash ip=223 while [ "$ip" -ne "239" ] ...
linux下高可用LVS搭建及配置方法
一,安装与配置ipvsadm ipvsadm --help #查询是否安装成功二,配置Director Server服务器 1. ifconifg eth0:0 183.61.87.4 ...
java参数传值方式
java参数有值类型和引用类型两种.所以java参数的传值也就从这两个方面分析. 从内存模型来说参数传递更为直观一些,这里涉及到两种类型的内存:栈内存(stack)和堆内存(heap). 基本类 ...
.NET自带缓存机制实例
using System;using System.Web;using System.Web.Caching;using System.Collections.Generic;using System ...
Office2016 KMS激活
Office标准版激活一新买本子需要安装Office,闲来无事就安装了一款Office Standard 2016,网上许多激活秘钥均已过期,无法激活,无奈下选择KMS激活. KMS下载链接如下: ...

【CSS3】背景

【CSS3】背景的更多相关文章

随机推荐

热门专题