css 动态背景 - 将Javascript放在页脚和CSS中。确保所有图像文件都以Photoshop文档中的名称命名
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 动态背景 - 将Javascript放在页脚和CSS中。确保所有图像文件都以Photoshop文档中的名称命名相关的知识,希望对你有一定的参考价值。
<script>
$( ".siteBottom section" ).each(function() {
if ($(this).find('.sidebar').children().length == 0){
$(this).find('.sidebar').hide();
} else {
var bg_url = $(this).find('.contentImg').css('background-image').split('/').pop().split('-').shift();
$(this).addClass(bg_url);
if ( $( this ).is( '.M_full_img, .M_left_img, .M_left_imgC, .M_right_imgC, .M_right_img' ) ) {
var bg_url_image = $(this).find('a.overlayImg').attr('href');
var bg_url_class = $(this).find('a.overlayImg').attr('href').split('large/').pop().split('.').shift();
$(this).prepend('<div class="backgroundImage"></div>');
$(this).find('.backgroundImage').css('background-image', 'url(' + bg_url_image + ')');
$(this).addClass(bg_url_class);
$(this).find('.sidebar').hide();
} else {
$(this).removeClass(bg_url);
}
}
});
</script>
/* ---------------------------------- */
/* ------ BACKGROUND IMAGE CSS ------ */
/* ---------------------------------- */
.siteBottom section * {
box-sizing: border-box;
}
.siteBottom section {
position: relative;
}
.M_full_img, .M_left_img, .M_left_imgC, .M_right_img, .M_right_imgC {
padding: 60px 0;
}
.backgroundImage {
position: absolute;
background-size: cover;
background-position: center center;
}
/*-- full width image --*/
.M_full_img .backgroundImage {
top: 0; left: 0; right: 0; bottom: 0;
}
/*-- image left --*/
.M_left_img .backgroundImage {
top: 0; left: 0; bottom: 0;
width: 50%;
}
.M_left_img .container {
width: 50%;
margin: 0 0 0 auto;
padding: 0 5%;
}
/*-- image right --*/
.M_right_img .backgroundImage {
top: 0; right: 0; bottom: 0;
width: 50%;
}
.M_right_img .container {
width: 50%;
margin: 0 auto 0 0;
padding: 0 5%;
}
/*-- image left cover --*/
.M_left_imgC .backgroundImage {
top: 0; left: 0; right: 0; bottom: 0;
}
.M_left_imgC .container {
width: 50%;
margin: 0 0 0 auto;
padding: 0 5%;
}
/*-- image right cover --*/
.M_right_imgC .backgroundImage {
top: 0; left: 0; right: 0; bottom: 0;
}
.M_right_imgC .container {
width: 50%;
margin: 0 auto 0 0;
padding: 0 5%;
}
@media all and (max-width: 700px){
.M_full_img, .M_left_img, .M_left_imgC, .M_right_img, .M_right_imgC {
padding: 40px 0;
}
.M_left_img, .M_right_img {
padding: 0;
}
.siteBottom section .container {
padding: 40px 20px;
width: 100%;
}
.M_left_img .backgroundImage, .M_right_img .backgroundImage {
position: relative;
width: 100%;
height: 250px;
}
.M_left_imgC .backgroundImage {
background-position: 90% 50%;
}
.M_right_imgC .backgroundImage {
background-position: 10% 50%;
}
}
以上是关于css 动态背景 - 将Javascript放在页脚和CSS中。确保所有图像文件都以Photoshop文档中的名称命名的主要内容,如果未能解决你的问题,请参考以下文章
css 动态背景 - 将Javascript放在页脚和CSS中。确保所有图像文件都以Photoshop文档中的名称命名
css 动态背景 - 将Javascript放在页脚和CSS中。确保所有图像文件都以Photoshop文档中的名称命名
开源超美css动态背景 可直接引入html文件使用 含注释可更改
[刘阳Java]_CSS数字分页效果
将图像背景放在 CSS 三角形上
JavaScript是如何改变网页的CSS样式的?