background-size | 易学教程

HTML连载78-3D播放器下、背景尺寸属性

阅读更多关于 HTML连载78-3D播放器下、背景尺寸属性

一、继续完善之前的页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D188_3DPlayerXia</title> <style> *{ margin:0px; padding:0px; } body{ background:url("image/taobaoFocusPicture.jpg") no-repeat; background-size:cover;/*这个属性表示我们的图片肯定会填满整个网页，无论图片的大小*/ overflow:hidden;/*代表的就是超出屏幕不会出现滚动条*/ } ul{ height: 200px; width: 200px; /*background-color: red;*/ top:150px; position:absolute; left:50%; margin-left:-100px; transform-style: preserve-3d;/*注意这个3D效果设置在了父元素上*/ /*transform:rotateX(-10deg);!*这一行的目的就是为了让我们的3D效果显示更加明显*!*/ animation:sport 10s linear 0s infinite normal;/*动画效果*/ } ul li {

web作业小结

阅读更多关于 web作业小结

1，添加背景图片时，背景图片无法完全显现（只显示图片的局部）利用background-size解决； background: url(gray-tunnel-207153.jpg) no-repeat ; background-size: 100% 100%;//可使图片完全显现 no-repeat设置图片形式不重叠，当图片宽度不大时，若不设置no-repeat有可能相当于两张相同图片并列显示。 2.插入背景图片，图片随所在块的文本宽度改变而改变　　为此块定义指定的 width height; .header{ width:360px; height:300px; background: url(mm.jpg); background-size: 100% 100%; margin-top: 100px; } 3去除链接的下划线　　text-deceration:none; 4.将图片设置成圆形　　设置borderr-radius的百分比。要得到圆形，需图片为正方形，若图片为长方形得到的会使之变成椭圆。 5.利用@media实现pc端和手机端两套视口的变化　　写两套css，一套针对手机端，另一套针对pc端，用media进行选择·。 @media only screen and (max-width:768px){} @media only screen and (min

CSS实现自适应下保持宽高比

阅读更多关于 CSS实现自适应下保持宽高比

在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）。为了不变形，常用的方法就是设置width值，然后高度height设置auto。如果是div，我们该如何处理呢。背景图片宽高比固定下面，我仿照了移动端的聚划算网站中（https://ju.m.taobao.com/）中间一部分的布局。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高度自适应</title> <style> *{ margin: 0; padding: 0; } div{ width: 100%; background-color: pink; position: relative; } div:after{display:block;content: "";visibility: hidden;clear: both;} div p{ float: left; width: 30%; padding-top: 35%; margin-left: 3%; border:1px black solid; border-radius: 10px; box-sizing: border-box; } div p:nth

前端学习(8)~css学习(二)：背景属性

阅读更多关于前端学习(8)~css学习(二)：背景属性

background 的常见背景属性 css2.1 中，常见的背景属性有以下几种：（经常用到，要记住） background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。 background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要） no-repeat 不要平铺； repeat-x 横向平铺； repeat-y 纵向平铺。 background-position:center top; 设置背景图片在当前容器中的位置。 background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是： scroll （与fixed属性相反，默认属性）、 fixed （背景就会被固定住，不会被滚动条滚走）。另外还有一个综合属性叫做 background ，它的作用是：将上面的多个属性写在一个声明中。 CSS3 中，新增了一些background属性： background-origin background-clip 背景裁切 background-size 调整尺寸多重背景上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。 background-color：背景颜色的表示方法 css2.1

07.背景样式

阅读更多关于 07.背景样式

07.背景样式 1.什么是背景样式背景样式：是W3C规定一个浏览器如何渲染元素的背景层，用户可以在背景层上增加颜色，图片等效果 2.背景单例样式 **背景颜色（background-color）**默认颜色为transparent，可以近似理解为透明） 3种写法： rgb: 字符含义 r→red（红） g→green（绿） b: blue（蓝）取值范围:rgb(0,0,0)→rgb(255,255,255) rgba：rgba较之rgb多了一个alpha通道用来设置背景透明度，a的取值范围为0~1，（opacity设置整个元素的透明度，背景色rgba设置背景层的透明度）十六进制： #000000~#ffffff(大小写都可,但是要统一)，#aabbcc简写: #abc 另外，背景颜色是可以延伸到border边框下的。背景图片（background-imag） background-image：url(“图片地址”); 常用背景图片格式： .jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损 .png 不支持动画，支持透明度，颜色更丰富，无损 .gif 支持动画，256种颜色，2种透明度，渐进显示 .webp 支持动画，高压缩率，高加载速率背景平铺（background-repeat）写法：background-repeat: repeat-x;

CSS中的背景属性background简述

阅读更多关于 CSS中的背景属性background简述

我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。 background-color background-color属性设置元素的背景颜色。它的值可以是任意合法的颜色值或者是transparent关键字。 .left { background-color: #ffdb3a; } .middle { background-color: #67b3dd; } .right { background-color: transparent; } 背景颜色绘制在由[background-clip]（＃backgroundclip）属性指定的盒模型的区域内。如果还设置了任何背景图像，则在它们后面绘制颜色层。与可以有多个的图像层不同，对于一个元素，我们只能有一个颜色层。 background-image background-image属性定义元素的一个或多个背景图像。它的值通常是用url（）符号定义的图像的url。也可以使用none作为它的值，但这样会生成一个空的背景层 .left { background-image: url('ire.png'); } .right { background-image: none; }

Background-size transition not work in Chrome

阅读更多关于 Background-size transition not work in Chrome

问题 I'm trying to transition background-size and background-color . Chrome : Transition of background-size not working Firefox : Both are working fine I have also created a fiddle. .highlight { display: block; position: relative; /*min-height: 800px;*/ min-height: 200px; background-position: center center; background-repeat: no-repeat; /*padding-top: 200px;*/ padding-top: 80px; /*background-size: cover;*/ } .highlight:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%;

Background-size transition not work in Chrome

阅读更多关于 Background-size transition not work in Chrome

【css3笔记】---- 渐变的秘密

阅读更多关于【css3笔记】---- 渐变的秘密

《CSS揭秘》这本书非常不错，充满了干货和惊喜。以下主要是关于使用渐变做出来的一些效果的笔记。请用最新的现代浏览器观看。首先要回顾下一个css语句： linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 这是一个线性渐变，第一参数是渐变方向，是可选的。可以是角度，angle的值是度数，比如45deg，90deg。也可以使用to side-or-corner .比如 to left（从右到左） ,to bottom(从上到下)；第二个和第三个参数都是渐变颜色。所以最简单的写法可以有： background: linear-gradient(aquamarine,orange) 默认是从上往下渐变。但如果我们不想要渐变，就要颜色条。诀窍就是两种颜色之间不要留空隙，因为留了空隙就会出现渐变的过渡效果。所以我们可以设置各占50%。这个50%代表颜色位置。也可以是长度单位。 background: linear-gradient(aquamarine 50%,orange 50%) 如果我们需要多种颜色呢，比如一个蓝白红。 background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%

How to emulate background-size: cover on <img>?

阅读更多关于 How to emulate background-size: cover on ?

问题 How can I resize and reposition the image inside a box, in such way that it covers the entire box, similar to how background-size: cover works. <div class="box" style="width: 100px; height: 100px;"> <img src="pic.jpg" width="413" height="325"> </div> I know I have to add overflow:hidden to the box and the image needs position: absolute . But what's the formula that gets me the right new size for the image, and left + top positions? 回答1: this may be easier jQuery $('.box').each(function() { /

订阅 background-size