㈠ css如何设置背景图片background属性添加背景图片
在前端开发中提升页面美感，背景图片的使用必不可少。CSS中的background属性就是实现这一目标的关键。它包括多个子属性，如background-color、background-position、background-size等，其中background-image属性正是用于设置HTML页面的背景图片。
设置background-image的基本语法是：background-image: url('image_path.jpg');只需要提供图片的URL，即可为div元素赋予背景图片。注意，为了确保图片显示，设置背景的div应具有明确的宽度和高度。
为了简化代码，可以同时设置多个属性，如：background: url(bgimg.gif) no-repeat 5px 5px;这表示背景图片位于右上角，不重复。CSS还可以用于实现全屏背景，如通过position: fixed; top: 0; left: 0;使div固定在屏幕顶部左边缘，width: 100%; height: 100%;使其自适应屏幕大小。
想要达到背景图片的透明效果，可以通过在背景图片上叠加一层透明div，再调整z-index和background-repeat属性。例如，z-index:-10可使div在其他元素之下，background-repeat:no-repeat阻止图片重复。
总的来说，CSS通过background属性提供了丰富的选项，以满足不同场景下的背景图片需求。熟练掌握这些技巧，你的网页设计将更加生动多彩。
㈡ css中如何将背景图片全屏显示
在CSS中，如果你希望为body元素设置全屏背景图片，可以使用background-size:100% 100%;或者background-size:cover;实现。其中，100% 100%表示背景图片宽度和高度均占100%，而cover属性则会自动调整图片大小，使其完全覆盖背景区域，同时保持图片的宽高比。
需要注意的是，如果body元素的高度不是固定值，背景图片可能无法完全显示。因此，你可以考虑为body设置一个固定的高度，或者使用其他方法确保背景图片能够正确显示。
另外，如果你希望背景图片在全屏显示时保持一定的比例，可以使用background-size:contain;，这样背景图片会尽可能缩小以适应背景区域，但不会拉伸图片。
在使用background-size属性时，还需要注意浏览器兼容性问题。尽管大部分现代浏览器都支持background-size属性，但在一些老旧浏览器中可能会出现兼容性问题，因此建议在项目中使用前进行测试。
最后，为了使背景图片与页面内容更好地融合，你还可以使用background-attachment:fixed;属性，这样背景图片会固定在页面上，随滚动条滚动而不会移动。
综上所述，通过合理设置background-size属性，可以轻松实现将背景图片全屏显示的效果，提升网站的视觉效果和用户体验。