css提示图像和固定背景[重复]

Posted 2023-03-06

【中文标题】css提示图像和固定背景[重复]

【英文标题】：css intimated image and fixed background [duplicate]

【发布时间】：2019-03-21 15:41:29

【问题描述】：

这是我网站上横幅的 css 代码

https://www.gettwitterretweet.com/css/images/social.png（png图片）

.product-page 
  background: url('../img/people.jpg') repeat;
  background-size: cover;
  border-bottom: none !important;
  background-attachment: fixed;
  padding: 80px 0;

【参考方案1】：

你可以这样做检查这个解决方案，只是你需要更新我使用背景颜色的背景图像

.product-page 
padding: 50px;
background-color: green; 
/* background: url('../img/people.jpg') repeat; */ 
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
background-size: cover;
border-bottom: none !important;
background-attachment: fixed;
padding: 80px 0;


.product-page:hover 
    transform: scale(1.5);

<div class="product-page"></div> 

【参考方案2】：

试试这个你可以管理你想要的持续时间。

@keyframes zoominout 
    0% 
        transform: scale(1,1);
    
    50% 
        transform: scale(1.1,1.1);
    
    100% 
        transform: scale(1,1);
    


.wrapper img 
	animation: zoominout 1s infinite ;

<div class="wrapper"><img class="image" src="https://www.gettwitterretweet.com/css/images/social.png"></div>

【讨论】：

我使用了此代码，但我也喜欢您的代码，感谢您的帮助 .product-page:before,.product-page:after content: "";显示：块；宽度：100%；高度：510px；位置：绝对；顶部：5px；动画名称：拉伸；动画持续时间：1.4s；动画定时功能：缓出；动画延迟：0.1s；动画方向：交替；动画迭代计数：无限；动画填充模式：无；动画播放状态：正在运行； @keyframes 拉伸 0% 变换：比例（.98）；

@Krish cj 如果我的代码对您有用，请点赞我的回答 :)