Vue图片拉近全屏背景实战经验总结

Posted 2022-10-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue图片拉近全屏背景实战经验总结相关的知识，希望对你有一定的参考价值。

1 图片拉近

缘起是看到了下面的图片，我发现当鼠标悬浮的时候，发现他是可以拉近的，也就是图片的宽高不变，但是图片被放大了

【Vue】图片拉近、全屏背景实战经验总结_html

起初我以为是有一个这样的方法，可以实现这个操作，但是查找了很多网站都没有找到。

后来自己慢慢的摸索，才了解了其中的奥妙

子盒子和父盒子的大小一样大，为了能体现出父子盒子，我让父盒子略大，并未黄色，子盒子为白色

【Vue】图片拉近、全屏背景实战经验总结_html_02

当鼠标悬浮到该子盒子的时候，子盒子被放大（scale），如下图

【Vue】图片拉近、全屏背景实战经验总结_图像缩放_03

同时，我设置子盒子超出父盒子的部分隐藏（overflow:hidden），这样我只能看到黄色部分，但是图片却被放大了，就看到了最初的效果，图片好像被拉进了

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet"  href="mystyle.css"/>
  </head>
  <body>
    <div class="div1">
      <img src="../作业2/images/5.jpg" class="div2">
    </div>
  </body>
  <style type="text/css">
  .div1
    margin-top: 50px;
    margin-left: 50px;
    height:400px;
    width: 400px;
    border: 1px solid red;
    overflow: hidden;
    
   .div2
     width: 400px;
     height: 400px;
     background-color: #0000FF;
     cursor: pointer;
   
   .div2:hover
     transform: scale(2);
   
  </style>
</html>

【Vue】图片拉近、全屏背景实战经验总结_图像缩放_04

这样似乎太突兀了，我们加一个实现的时间 1s transition: 1s;

【Vue】图片拉近、全屏背景实战经验总结_html_05

这样就舒服多了

写这一篇博客，我发现这个图片功能太简单了。我自己用vue做的时候，用的是@mouseover @mouseout 需要两个方法
让其有1s动画效果的时候，我用的是根据类名获取元素，然后鼠标悬浮的时候给他加上动画的效果。
但是动画的效果默认是不会保存的，间隔一秒后又会回到初始化的状态，所以又加了一句animation-fill-mode:forwards，让其保持动画的状态。
写这篇博客之后，原来只需要几行代码就解决了！

2 全屏背景

<template>
  <div id="app">
    
  </div>
</template>

<script>

export default 
  name: App,

</script>

<style>
body 
    margin: 0;
    background: #e8e8e8 url(@/assets/oprea_background02.png) center bottom;
    /* 设置背景图片会不会随着屏幕滚动 */
    background-attachment: fixed;
    /* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */
    background-size: cover;
    /* 去掉好像也没什么 */
    display: flex;
    /* 设置height:100vh，能够保证元素无论是否有没有内容，高度都等于屏幕高度。 */
    min-height: 100vh;
    flex-direction: column;


</style>

【Vue】图片拉近、全屏背景实战经验总结_html_06

2.1 background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

scroll就是说，这个背景图片不是固定的，会随着页面高度的改变而变

fixed意味着，图片是固定的，不会随着页面高度的改变而改变

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

2.2 background-size

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。