在悬停按钮 CSS 动画后面放置正确格式的图像

Posted 2023-05-08

【中文标题】在悬停按钮 CSS 动画后面放置正确格式的图像

【英文标题】：Placing correctly formatted image behind a Hover Button CSS Animation

【发布时间】：2018-02-09 00:14:46

【问题描述】：

我目前正在尝试将图像放在我想与按钮一起使用的 CSS 悬停动画后面。

成品应如下所示： Mock Up of Finished Product

任何尝试正确插入和格式化这样的背景的帮助将不胜感激，因为我一直在尝试插入图像时遇到死胡同。

到目前为止，这是我一直在使用的。

@import "bourbon";

* 
	-webkit-transition-property: all;
	-webkit-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
	-moz-transition-property: all;
	-moz-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);

h1  font-family: calibri;
  color:#FFFFFF;
  font-size: 20px;
  text-align: center;

body 
  background-color: #613f4d;
  padding-top: 70px;
  font-family: 'Open Sans', calibri;
  text-align: center;
  font-weight: 100;



.btn 
  position: relative;
  display: inline-block;
  width: 166px;
  height: 45px;
  font-size: 17px;
  line-height: 45px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  overflow: hidden;

.btn svg 
  position: absolute;
  top: 0; left: 0;

.btn svg rect 
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 422, 0;
  
  @include transition(all 1300ms $ease-out-expo);

.btn:hover svg rect 
  stroke-width: 5;
  stroke-dasharray: 10, 310;
  stroke-dashoffset: 33;


.btn:hover 
  color:#fff;
  font-size:18px;
  letter-spacing:1px;
  font-weight:bold;

<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

<h1>Find out more about our</h1>
<div class="btn">
  <svg>
    <rect x="0" y="0" fill="none"  />
  </svg>
 Company
</div>

【问题讨论】：

您的要求是将上面的sn-p更改为您共享的图像。对吗？

@LibinCJacob 是的，我想将上面的 sn-p 放在图像顶部，如我创建的模型图像所示。

【参考方案1】：

我认为您期望如此处所示。请检查一下。

@import "bourbon";

* 
	-webkit-transition-property: all;
	-webkit-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
	-moz-transition-property: all;
	-moz-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);

h1  font-family: calibri;
  color:#FFFFFF;
  font-size: 20px;
  text-align: center;

body 
  background-color: #613f4d;
  padding-top: 70px;
  font-family: 'Open Sans', calibri;
  text-align: center;
  font-weight: 100;



.btn 
  position: relative;
  display: inline-block;
  width: 166px;
  height: 45px;
  font-size: 17px;
  line-height: 45px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  overflow: hidden;

.btn svg 
  position: absolute;
  top: 0; left: 0;

.btn svg rect 
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 422, 0;
  
  @include transition(all 1300ms $ease-out-expo);

.btn:hover svg rect 
  stroke-width: 0;


.btn:hover .heading 
display:none;


    
    .bg 
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;


.btn :hover ~ .bg 
  //background: #ff6d6d;
   background-image: url("https://i.stack.imgur.com/WpFwN.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;

<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

<h1 class="heading">Find out more about our</h1>
<div class="btn">
  <svg>
    <rect x="0" y="0" fill="none"  />
  </svg>
 <div class="heading"> Company</div>
 <div class="bg">
 </div>
</div>