加载中...
PAGE

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

Post on 2021-10-27 13 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%;

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

服务器文件上传500报错,500 InternalServerError

服务器文件上传500报错,500 InternalServerError

阅读更多
微信小程序 简易的滑动选择框

微信小程序 简易的滑动选择框

阅读更多
kubernetes 401 You have been logged out because your token has expired

kubernetes 401 You have been logged out because your token has expired

阅读更多

暂无评论

    发表评论
    返回顶部
    X