css3放大（利用css3进行页面的放大处理，可是元素select的子元素option却没有对应放大，还是依旧处在页面的原位置）

本文目录

• 利用css3进行页面的放大处理，可是元素select的子元素option却没有对应放大，还是依旧处在页面的原位置
• html+css3实现放大镜效果 （2021-08-25）
• CSS3设计网页怎么放大背景图片

利用css3进行页面的放大处理，可是元素select的子元素option却没有对应放大，还是依旧处在页面的原位置

CSS 3.0 虽然效果很炫，有阴影等视觉特效，动画特效，但是对中国目前主流的浏览器IE 6.0 7.0 8.0 均不支持，其他的国产浏览器，如傲游、360、世界之窗等，都是基于IE的核心开发的，也不能兼容，所以暂时在中国还不会完全推广，目前大家都在“吃螃蟹”阶段。
运用方法和CSS2.0是一样的，也是写在CSS文件里面做外部导入，或者直接写在页面里面。
建议不要运用到实际项目中，可平时做为学习、探索使用

html+css3实现放大镜效果 （2021-08-25）

    1、给body添加背景图，在body中添加一个父盒子（父盒子开启绝对定位），父盒子中再添加一个子盒子。

    2、给window添加鼠标移动事件，根据鼠标在浏览器中的坐标（clientX和clientY）修改父盒子的top和left，以达到移动镜面的效果。

    3、给子盒子添加背景图（和body背景图一致），在window的鼠标移动事件中修改子盒子的样式——background-position，改变子盒子中的背景图在盒子中的显示位置，使背景图的显示与body一致。

    4、再给子盒子添加缩放（transform:scale(2)），即可实现放大功能。

    1、由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。

    2、这时虽然给背景设置上了透明的，但却是发白的那种透明，要想变成暗沉的透明，只需要给body添加背景颜色就行。

    3、background-position的使用，由于是要将背景的选中位置移动到盒子的中心，所以使用的是负值。

《!DOCTYPE html》

《html lang="en"》

《head》

  《meta charset="UTF-8"》

***隐藏网址***

  《meta name="viewport" content="width=device-width, initial-scale=1.0"》

  《title》Document《/title》

  《style》

    body {

      padding: 0;

      background-color: #000;

      margin: 0;

    }

    body::after{

      display: block;

      position: absolute;

      top: 0;

      left: 0;

      content: ’’;

      width: 100%;

      height: 100%;

      background-image: url(’伊芙琳.jpg’);

      background-position: 0px 0px;

      background-size: 100% auto;

      opacity: 0.1;

    }

    .magnifier {

      width: 300px;

      height: 300px;

      background-image: url(’伊芙琳.jpg’);

      background-size: 1730px auto;

      background-position: 0px 0px;

      transform: scale(2);

      margin: 0;

      position: relative;

      z-index: 100;

    }

    .main {

      width: 300px;

      height: 300px;

      border-radius: 50%;

      overflow: hidden;

      position: absolute;

    }

  《/style》

《/head》

《body》

  《div class="main"》

    《div class="magnifier"》《/div》

  《/div》

  《script》

    let flag = true

    let magnifier = document.getElementsByClassName(’magnifier’)

    let main = document.getElementsByClassName(’main’)

    let boxLeft = 0

    let boxTop = 0

    window.onmousemove = (event) =》 {

      if(!flag) return

      setTimeout( ()=》{

          flag = true

      },50)

      console.log(event.clientX, event.clientY);

      if(event.clientX 》 1590) {

        event.clientX = 1590 

      }

      boxLeft =  event.clientX 》 1590 ? ’1440px’ : event.clientX 》 150 ? event.clientX - 150 + ’px’:’0px’

      boxTop = event.clientY 》 720 ? ’575px’ : event.clientY 》 150 ? event.clientY - 150 + ’px’:’0px’

      main.style.left = boxLeft

      main.style.top = boxTop

      // magnifier.style.backgroundPosition = ’830px 570px’

      magnifier.style.backgroundPosition = ’-’ + boxLeft + ’ ’ + ’-’ + boxTop
      flag = false

    }

  《/script》

《/body》

《/html》

CSS3设计网页怎么放大背景图片

回答：no-repeat 就是不重复图片追问：我知道no-repeat是不重复图片的意思，但是你就这么打在style也没用，前面要加一个background-repeat：，我的意思是fixed center top transparent这几个前面要加什么才会生效回答