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

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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • RS232电平和TTL电平

    结论:TTL电平和RS232电平,无论是在电压范围还是在极性上(RS232是负逻辑)都有很大的不同。显然,这两种电平是不能直接相连的。为了把单片机的TTL电平转换成RS232电平,通常我们需要一个专用的转换芯片,比如SP3232。RS232是工业上常用的串口标准,无论是PLC的RS232串口模块,还是工控机的串口(COM),输出的电平都称为RS232电平。同时我们知道这些模块的内部控制单元都是…

    2022年4月17日
    49
  • SLAM技术概述_SRAM工艺

    SLAM技术概述_SRAM工艺导语随着最近几年机器人、无人机、无人驾驶、VR/AR的火爆,SLAM技术也为大家熟知,被认为是这些领域的关键技术之一。本文对SLAM技术及其发展进行简要介绍,分析视觉SLAM系统的关键问题以及在实际应用中的难点,并对SLAM的未来进行展望。1.SLAM技术SLAM(SimultaneousLocalizationandMapping),同步定位与地图构建,最早在机器人领域提出,…

    2022年10月1日
    0
  • react-router4的按需加载实践(基于create-react-app和Bundle组件)

    react-router4的按需加载实践(基于create-react-app和Bundle组件)

    2022年4月2日
    40
  • 现代OpenGL教程(一):绘制三角形(imgui+OpenGL3.3)

    前言:imgui是一个开源的GUI框架,自带的例子里面直接集成了glfw+gl3w环境,本例使用的版本是imguiv1.61,下载地址:https://github.com/ocornut/imgui/tags教程目录(持续更新中):现代OpenGL教程(一):绘制三角形(imgui+OpenGL3.3)现代OpenGL教程(二):矩阵变换(imgui+OpenGL3.3)

    2022年4月8日
    332
  • Qt:windows下Qt安装教程

    Qt:windows下Qt安装教程win10按照qt

    2022年5月17日
    42
  • android触摸屏事件,Android Touch事件分析

    android触摸屏事件,Android Touch事件分析AndroidTouch事件分析本文将分析Touch事件的传递。很多复杂的功能都需要深刻的处理Touch事件,例如侧边栏,例如图标的拖动换位。一,Touch事件的执行轨迹Down—>MoveàUP/Cancel二,Touch事件的分类Touch事件可分为两类:OnTouchEvent和onInterceptTouchEvent。消息传递的两种方式(Z轴方向)前者是正在执行touch事件的…

    2022年9月3日
    3

发表回复

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

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