如何为CSS / CSS3中的背景图像选择边距？ [英] how to select margin for a background image in CSS/CSS3?

问题描述

我不知道为什么设置宽度和高度为70％没有工作。有没有反正，要解决这个问题，所以我们可以在图像的所有四面都有边距？喜欢我想让页面的30％从顶部，底部和左侧和右侧宽，其余的由背景图片。

I am not sure why setting width and height to 70% didn't work. Is there anyway, to fix this so we can have margin on all 4 sides of the image? Like I want to have 30% of the page from top, bottom and left and right to be wide and the rest be taken by the background image.

<style type="text/css">body {

background-image:url('https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_00pfOKSXTudGqfb');
background-repeat: no-repeat;
    width: 70%;
height: 70%;



}
</style>

Here's the jsfiddle just in case.

推荐答案

你可以使用flex属性和background-size： DEMO

You could use the flex properie and background-size: DEMO

html {
    height:100%;/* size that body can inherit or use as reference */
    width:100%;/* size that body can inherit or use as reference */
    background:black;/* background needs to set and be different from body, else it is drawn here */
    display:flex;/* the magic that everybody will love */
}
body {
    margin:auto;/* within a flex container it applys on both axis */
    background-image:url('https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_00pfOKSXTudGqfb');
    background-repeat: no-repeat;
    background-size:70vw 70vh;/* if you use flex, you may use vx units too :) */
}

或display：table / table-cell属性和背景大小： DEMO

Or display:table/table-cell properties and background-size: DEMO

html {
    height:100%;
    width:100%;
    background:black;
    display:table;
}
body {
    display:table-cell;
    background-image:url('https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_00pfOKSXTudGqfb');
    background-repeat: no-repeat;
    background-position:center;
    background-size:70% 70%;
}

这篇关于如何为CSS / CSS3中的背景图像选择边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！