加载中...
PAGE

css 背景图片自适应属性整理

Post on 2021-10-27 123 0

本篇博客主要记录一些使用 css 对背景图片自适应的操作整合

背景图片取消重复

background-image: url(image.jpg); background-repeat:no-repeat;

修改前
背景图片取消重复
修改后
背景图片取消重复

背景图片固定(不会随着内容滚动而改变位置)

background-image: url(image.jpg); background-attachment:fixed;

背景图片居中显示

垂直水平居中

background-image: url(image.jpg); background-repeat:no-repeat; background-position:center center;

背景图片居中显示
水平方向居中 垂直方向向上

background-image: url(image.jpg); background-repeat:no-repeat; background-position:center top;

在这里插入图片描述
水平方向向右 垂直方向向下

background-image: url(image.jpg); background-repeat:no-repeat; background-position:right bottom;

在这里插入图片描述

背景图片等比例拉伸

background-image: url(image.jpg); background-repeat:no-repeat; background-size: auto 100%; /* background-size: 100% auto; */

背景图片等比例拉伸
或根据高度进行拉伸
背景图片等比例拉伸
还可以使用 cover 自动等比例拉伸图片

background-image: url(image.jpg); background-repeat:no-repeat; background-size: cover;

背景图片等比例拉伸

背景图片拉伸(会扭曲图片)

background-image: url(image.jpg); background-repeat:no-repeat; background-size: 100% 100%;

背景图片拉伸(会扭曲图片)

java 字符串、时间和时间戳之间的转换

java 字符串、时间和时间戳之间的转换

阅读更多
mycat 简单实现 读写分离

mycat 简单实现 读写分离

阅读更多
mysql 根据日期进行查询数据,没有数据也要显示空

mysql 根据日期进行查询数据,没有数据也要显示空

阅读更多

暂无评论

    发表评论
    返回顶部
    X