我要评论需求背景
使用 vue 做的项目，业务需求有一个拼图效果，默认是深色的背景图，上面分五个区域，每次会亮一个区域，整张图都亮，拼图完成。先来看一下最终的效果图。
应用到的知识点：
- background-size
- background-position
- transform：rotate
实现思路：
外层大盒子用来放暗色背景图，里面的5块拼图，是5个div，每块拼图都使用背景定位的方式展示背景图的固定区域，中间的拼图做了旋转。但是旋转后，又遇到了个问题：背景图片也跟着旋转了，像下面这样：
解决背景旋转的思路：可以在第5块拼图的外层套一个盒子，将外层盒子向右旋转45度，再将背景的元素向左旋转45度。操作完又发现了新的问题，下面图中的黑色边框是外层盒子（为了方便看，把其他的拼图块都设置为不可见）。如果给外层盒子设置 overflow:hidden ，那么中间拼图的上下左右四个角都会缺失。
我们需要把第五块拼图的宽高设置大一些，再设置它外层的盒子 overflow:hidden。宽高设置大的话，对应的 background-size 也要改变。
最后，就可以实现刚开始的效果了，完整的 vue 代码如下：
<template>
<section class="box">
<div class="bg" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>
<div v-if="item1show" class="item item1" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>
<div v-if="item2show" class="item item2" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>
<div v-if="item3show" class="item item3" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>
<div v-if="item4show" class="item item4" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>
<div v-if="item5show" class="item item5wrap">
<div class="item5" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>
</div>
</section>
</template>
<script>
import bgimg from "@/assets/bg.jpeg";
export default {
data() {
return {
bgimg,
item1show: false,
item2show: true,
item3show: true,
item4show: true,
item5show: true
};
}
};
</script>
<style lang="less">
@bordercolor: #333;
.box {
margin: 0px auto;
width: 300px;
height: 200px;
background-color: #000;
position: relative;
.bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.5;
}
.item {
width: 50%;
height: 50%;
box-sizing: border-box;
background-size: 200% 200%;
border-right: 1px solid @bordercolor;
border-bottom: 1px solid @bordercolor;
position: absolute;
}
.item1 {
background-position: 0 0;
left: 0;
top: 0;
}
.item2 {
background-position: 100% 0;
left: 50%;
top: 0;
}
.item3 {
background-position: 0 100%;
left: 0;
top: 50%;
}
.item4 {
background-position: 100% 100%;
left: 50%;
top: 50%;
}
.item5wrap {
width: 100px;
height: 100px;
border-left: 1px solid @bordercolor;
border-top: 1px solid @bordercolor;
transform: rotate(45deg);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
overflow: hidden;
.item5 {
width: 150px;
height: 150px;
background-position: 50% 50%;
background-size: 200% 133%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}
</style>
到此这篇关于css3 菱形拼图实现只旋转div 背景图片不旋转功能的文章就介绍到这了,更多相关css3旋转图片内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论