1. 全栈程序员必看首页

css设置背景图片大小自适应_css设置整个页面背景图片

全栈程序员-站长 • • 未分类 • 阅读 3

css设置背景图片大小自适应_css设置整个页面背景图片background:pink;图片在背景图上面background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

background:pink;图片在背景图上面

background-image:url(food.jpg);一张图片铺满一行
background-repeat:repeat-x;同一张图片多张铺满横向

background-repeat:repeat-y;同一张图片多张铺满纵向

background-repeat:no-repeat;只在左上角显示一张按图片原来的大小显示

background-attachment:fixed;把图片固定在某处，图片不随着滚动条的滚动上下移动

 background-position:center;图片位置居中

css设置背景图片大小自适应_css设置整个页面背景图片

<style>
#test1{
 background:pink;
 background-image:url(food.jpg);
 height:493px;
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position:center;
}
</style>
</head>
<body>
<p id=”test1″>人生总有许多偶然和巧合，两条平行线，也可能会有交汇的一天。
人生又有许多意外和错过，握在手里的风筝，也会突然断了线……。 </p>
</body>

精确控制图片显示位置：

background-position:center  enter;

css设置背景图片大小自适应_css设置整个页面背景图片

<style>
#test1{
 width:500px;
 height:400px;
 background-image:url(food.jpg);
 background-repeat:no-repeat;
 background-position:center center;
}
</style>
</head>
<body>
<div id=”test1″></div>

</body>

用精确的像素来确定位置：

css设置背景图片大小自适应_css设置整个页面背景图片

<style>
#test1{
 width:500px;
 height:400px;
 background-image:url(food.jpg);
 background-repeat:no-repeat;
 background-position:center center;
}
#test2{
 width:50px;
 height:30px;
 background-image:url(food1.jpg);
 background-position:-150px -500px;
}
<style>
</head>
<body>
<div id=”test1″></div>
<div id=”test2″></div>
</body>

把所有的代码写在一行里的顺序

css设置背景图片大小自适应_css设置整个页面背景图片

后面是具体像素，显示图片上你需要的某部分，即用一张图做多个元素的背景，调整需要部分它的位置即可

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/167098.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • Windows 10 下，强制关闭端口

    Windows 10 下，强制关闭端口

    Windows 10 下，强制关闭端口Windows10下，端口被占用或程序已关闭端口没有正常关闭时，强制关闭端口这种方法的前提是知道被占用的端口号这是我用的一种方法1、打开命令窗口，根据端口号查询这个端口号的PID，以端口号9001为例进入命令窗口执行命令netstat-ano|findstr”9001″如下图查询到端口9001对应的pid为566322、根据查出来的pid强制关闭这个端口号命令…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月20日
  • BZOJ 1022 SHOI2008 小约翰的游戏John 博弈论

    BZOJ 1022 SHOI2008 小约翰的游戏John 博弈论

    BZOJ 1022 SHOI2008 小约翰的游戏John 博弈论

    全栈程序员-站长的头像 全栈程序员-站长
    2022年2月3日
  • break和continue的区别

    break和continue的区别

    break和continue的区别1.break用break语句可以使流程跳出switch语句体，也可以用break语句在循环结构终止本层循环体，从而提前结束本层循环。使用说明：（1）只能在循环体内和switch语句体内使用break；（2）当break出现在循环体中的switch语句体内时，起作用只是跳出该switch语句体，并不能终止循环体的执行。若想强行终止循环体的执行，可以在循环体中，但并不在switch语…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月14日
  • 转换流实现了字节流和字符流之间的互相转换_java输出流输出文件

    转换流实现了字节流和字符流之间的互相转换_java输出流输出文件

    转换流实现了字节流和字符流之间的互相转换_java输出流输出文件1、转换流–OutputStreamWriter简介:OutputStreamWriterextendsWriter,转换流也是继承自超类Writer，因此可以使用Writer中的共性方法：write(intc),write(char[]ch),…,flash(),close(),…OutputStreamWriter常用的构造方法：1）OutputStreamWr…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月3日
  • 分布式锁的使用场景_分布式锁的三种实现的对比

    分布式锁的使用场景_分布式锁的三种实现的对比

    分布式锁的使用场景_分布式锁的三种实现的对比前言对于锁大家肯定不会陌生，比如synchronized关键字和ReentrantLock可重入锁，一般我们用其在多线程环境中控制对资源的并发访问。但是随着业务的发展，分布式的概念逐渐出现在我们系统中，我们在开发的过程中经常需要进行多个系统之间的交互，于是上面的加锁方法就会失去作用。于是在分布式锁就自然而然的诞生了，接下来我们来聊一聊分布式锁实现的几种方式。分布式锁的使用场景 效率性:使用分布式锁可以避免不同节点重复相同的工作。 正确性:分布式锁可以避免破坏正确性的发生，如

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月8日
  • python 导入数据错误：UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xb5 in position 0: invalid start

    python 导入数据错误：UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xb5 in position 0: invalid start

    python 导入数据错误：UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xb5 in position 0: invalid start正想导入数据到python作分析找到这个教程https://www.cnblogs.com/OliverQin/p/8966321.html我要导入CSV文件，已经放在相同目录之下。importpandasaspddata=pd.read_csv("电信客户流失.csv",encoding="utf8")报错如下———————–…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月16日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号