css动态背景图片定位
css dynamic background image positioning
我有一些动态图像作为一些 div 的背景。那些具有可变的宽度和高度。在每个这样的 div 前面,我都有一个单选按钮。有一种方法可以通过 css 每个 div 对齐到正好在中间,指的是前面的单选按钮?我不能使用固定的背景高度,因为有动态并且高度不同。我试图输入 background-size: 100% 100%;
或 background-size: auto;
不起作用
非常欢迎任何帮助,谢谢!!!
尝试:
background-position: center center;
=====
更新:
使用您的 fiddle!
更容易
试试这个:
div.VISA_logo {
background: url("http://www.globalworkandtravel.com/sites/all/modules/customshare/includes/facebook.png") no-repeat;
}
div.VISA_CARTE_BLEUE_logo{
background: url("http://www.discoverireland.ie/App_Themes/DiscoverIreland/images/discoveries/button-add-trip-small.png") no-repeat;
}
div.MasterCard_logo{
background: url("https://s3.amazonaws.com/sugarstats/s3_avatars/7287/1234222094_norm.jpg") no-repeat;
}
div.AMEX_logo{
background: url("http://www.uappointment.com/images/google-small-icon.png") no-repeat;
}
div.PAYPAL_logo{
background: url("http://i.imgur.com/EqgOS.png") no-repeat;
}
div.VISA_logo,
div.MasterCard_logo,
div.PAYPAL_logo,
div.VISA_CARTE_BLEUE_logo,
div.MasterCard_DE_FR_UK_logo,
div.AMEX_logo {
width: 105px;
margin-left: 5px;
height: 42px;
float: right;
margin-right: 30px;
background-position:0 center;
}
我有一些动态图像作为一些 div 的背景。那些具有可变的宽度和高度。在每个这样的 div 前面,我都有一个单选按钮。有一种方法可以通过 css 每个 div 对齐到正好在中间,指的是前面的单选按钮?我不能使用固定的背景高度,因为有动态并且高度不同。我试图输入 background-size: 100% 100%;
或 background-size: auto;
不起作用
非常欢迎任何帮助,谢谢!!!
尝试:
background-position: center center;
=====
更新:
使用您的 fiddle!
更容易试试这个:
div.VISA_logo {
background: url("http://www.globalworkandtravel.com/sites/all/modules/customshare/includes/facebook.png") no-repeat;
}
div.VISA_CARTE_BLEUE_logo{
background: url("http://www.discoverireland.ie/App_Themes/DiscoverIreland/images/discoveries/button-add-trip-small.png") no-repeat;
}
div.MasterCard_logo{
background: url("https://s3.amazonaws.com/sugarstats/s3_avatars/7287/1234222094_norm.jpg") no-repeat;
}
div.AMEX_logo{
background: url("http://www.uappointment.com/images/google-small-icon.png") no-repeat;
}
div.PAYPAL_logo{
background: url("http://i.imgur.com/EqgOS.png") no-repeat;
}
div.VISA_logo,
div.MasterCard_logo,
div.PAYPAL_logo,
div.VISA_CARTE_BLEUE_logo,
div.MasterCard_DE_FR_UK_logo,
div.AMEX_logo {
width: 105px;
margin-left: 5px;
height: 42px;
float: right;
margin-right: 30px;
background-position:0 center;
}