HTML + CSS CSS设置背景图片后图片没有铺满屏幕等

在15PB学习了一个星期的 HTML + CSS之后,发现还有一些东西需要去记忆,俗话说的好:
眼过千遍不如手过一遍,这就把需要记忆的东西记下来。

很多时候我们遇到的情况是:

设置背景图片background-image:url(xxx.jpg);
如果背景图片不平铺就达不到全屏的效果,如果平铺了之后效果就有些差强人意,这时候CSS这个属性就派上用场了
background-size: cover;     //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

这个属性有四个值:
length              设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"
percentage          以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
cover               把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain             把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
还有一些属性和值是需要经常用但是不易记住的属性
letter-spacing              //设置字符间距
text-decoration             //文本的装饰  例如:下划线
text-shadow                 //文字阴影
text-indent                 //首行缩进
font-family                 //设置字体
font-style                  //斜体文本
font-weight                 //文本粗细

                列表样式
list-style-type             //列表项目外观
list-style-position         //列表符号的位置
list-style-image            //把图像设置为列表项目的标记

                伪类选择器
a:link                      //未访问的链接
a:visited                   //已访问的链接
a:hover                     //鼠标移动上去
a:active                    //鼠标点上去不放
:focus                      //选中那块标签的颜色
:first-child                //选择元素第一个子元素
:last-child                 //选择某个元素最后一个子元素
:nth-child(x)               //选择某个元素的第x个元素

               伪元素选择器
::before                    //在内容之前插入新内容
::after                     //在内容之后插入新内容
::first-line                //选择指定选择器首行
::first-letter              //选择文本的第一个字符

        如果是div溢出需要用到overflow属性,该属性值如下:
visible                     //默认值,超出内容不会被修剪呈现在元素外
hidden                      //超出部分被隐藏
scroll                      //不论是否需要一直显示滚动条
auto                        //按需显示滚动条

边框
outline:dashed;             //虚线轮廓
先写到这里,如果有需要会继续添加

原文地址:https://www.cnblogs.com/5Arno/p/12040150.html

时间: 2024-12-08 02:10:15

HTML + CSS CSS设置背景图片后图片没有铺满屏幕等的相关文章

CSS如何设置背景图片水平重复和垂直重复

CSS如何设置背景图片水平重复和垂直重复: 设置背景图片的水平平铺或者垂直平铺非常的简单,使用两端代码就可以了,代码如下: background:url("photo.gif") repeat-y; 以上代码可以让背景图片在垂直方向上平铺. background:url("photo.gif") repeat-x; 以上代码可以让背景图片在水平方向上平铺. 非常的简单,具体可以参阅以下两篇文章: 1.background-repeat属性可以参阅CSS的backgr

css基础 设置背景 背景色 背景图片 不平铺 背景图片在x、y轴上的位置

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

背景图片铺满屏幕-------Day85

你有没有遇到过一种情况,你特别喜欢一张图片,可是可惜的是这张图片就小了那么一丁点.但有小片留白啊,那就不好看了啊.你有没有过呢,我不知道,但我真的就碰到了.我特喜欢那张图,就想让它做背景,可就小了点.于是我就想办法了. background-size:cover: background-size:contain. 两个看起来几乎相同,实际原理还真不一样: cover.翻译过来就是"覆盖",这是纯正的背景铺满了元素,它会比較图片的长和宽.哪一个比較小,它就以哪一个为基准进行扩大.图片的本

base64转byte[]、byte[]转base64、byte[]转图片后图片按固定宽高缩放

/**     * 图片缩放     */    public static BufferedImage ImageStringByte(int width, byte[] b) {                InputStream buffin = new ByteArrayInputStream(b);        BufferedImage src = null;        try {            src = ImageIO.read(buffin);        }

解决IE8浏览器下背景图片无法拉伸(铺满)的问题

IE8浏览器不兼容这种写法: 1 body{ 2 background-image:url(1.jpg); 3 background-size:cover; 4 background-repeat:no-repeat; 5 } 6 7 <body> 8 </body> 网上找了很多方法,包括使用滤镜什么的都不管用,后来发现其实很简单. 解决方法:使用<img>标签即可,如下: 1 img { 2 position: fixed; 3 width: 100%; 4 hei

小程序中保持图片不变形并且铺满盒子

效果图: 解释: 假如  直接设置img  长宽100%;会出现图片变形 <view class='item-l' style='width:500rpx;height:500rpx;background:#ccc'> <image style="width:100%;height:100%" src='/img/test.png'></image> </view>               这里就要用到 image属性 mode: &

div设置全屏(铺满屏幕)

1.如果要以百分比设置元素(div)的尺寸,必要以父元素的尺寸作为参考,如果父元素没有设置尺寸,那么子元素(div)尺寸自然不会生效.2.所以如果设置div的高度为100%,那么他的参考元素就是是body,那么如何设置body的尺寸呢?3.在怪异模式下,body可以作为根元素,设置它的高度为100%的时候(不考虑外边距),body的高度取是浏览器的高度.4.在标准模式下,html元素才是根节点,div的父元素是body,body的父元素是html,然后html设置为100%,取得是浏览器的高度,

android拍照获得图片及获得图片后剪切设置到ImageView

ok,这次的项目需要用到设置头像功能,所以做了个总结,直接进入主题吧. 先说说怎么 使用android内置的相机拍照然后获取到这张照片吧 直接上代码: Intent intentFromCapture = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); Uri imageUri = Uri.fromFile(new File(Environment.getExternalStorageDirectory()+"/zxy/image/temp.png&qu

CSS属性:背景属性(图文详解)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. background系列属性 常见背景属性 CSS样式中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景颜色. background-image:url(images/2.gif); 将图像设置为背景. background-repeat: no-repeat; 设置背景图片是否重复及如何重复,默认平铺