使用css在响应图像上播放按钮

使用CSS在响应图像上播放按钮可以通过以下步骤实现：

首先，确保你有一个包含图像的HTML元素，比如一个<div>或<img>标签。例如：

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

接下来，使用CSS样式来创建播放按钮。你可以使用伪元素::before或::after来添加按钮图标。例如：

.image-container {
  position: relative;
}

.image-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-image: url(play-button.png);
  background-size: cover;
  cursor: pointer;
}

在上面的示例中，我们使用了一个名为play-button.png的图像作为按钮的背景图像，并使用background-size: cover;来确保图像填充按钮。

最后，为按钮添加交互效果。你可以使用CSS的hover伪类来改变按钮的外观，以增强用户体验。例如：

.image-container::before:hover {
  opacity: 0.8;
}

在上面的示例中，我们使用opacity属性来改变按钮的透明度，以在鼠标悬停时提供视觉反馈。

这样，你就可以在响应图像上使用CSS创建一个播放按钮了。根据具体的需求，你可以进一步调整样式和交互效果。

页面内容是否对你有帮助？

有帮助

没帮助

使用css在响应图像上播放按钮

css、html、flexbox

我正在尝试在响应图像上显示播放按钮。按钮有96x96px，需要在图像的中心。我尝试了很多方法，但总是很糟糕。我读过一些关于flex设计的文章，也许在flex中做起来很简单？

浏览 8提问于2017-02-26得票数 2

1回答

如何在视频图像中定位css精灵播放按钮

css、html、css-sprites

我正在使用一些旧的表格结构html，目前不允许更改。我有麻烦的播放按钮图像排成一排的视频图像与CSS。在真正的网站上，它们一直都在页面的顶部。我知道这是因为绝对的定位。这是一个包含我的

浏览 1提问于2012-10-01得票数 0

回答已采纳

2回答

我有大约24张带有悬停的大封面图片，可以显示电台信息和一个播放按钮。当用户点击播放按钮时，“播放器”改变信息以匹配用户点击的内容。目前我在“播放器”中有一个较小的封面图像，它不会改变以匹配较大的版本。我希望在播放器中的小封面图像也改变，就像电台名称和电台信息一样，当用户点击播放时，使它们与较大的图像相匹配这是我到目前为止拥有的脚本。我还没有在脚本中的封面图像更改，因为这是我试图找出如何链接的小图像，因为目前我只有一

浏览 0提问于2012-10-14得票数 0

回答已采纳

1回答

移动设备上覆盖默认视频播放按钮的Css

css、html、mobile、video、html5-video

在html5视频播放器中，如何使用css覆盖或浮动在iPhone等移动设备上默认视频播放按钮前面带有可点击链接的图像？

浏览 2提问于2013-02-01得票数 0

回答已采纳

3回答

如何基于父div对元素进行居中？

html、css、centering

我正试图在视频上添加一个大的播放按钮。 </video></div> width:100%; max-h

浏览 1提问于2014-02-12得票数 3

回答已采纳

2回答

如何在视频缩略图中插入播放按钮？

php、ffmpeg

我正在使用ffmpeg从视频创建缩略图，它工作得很好。我已经使用CSS来获得它，但我想知道是否有任何方法来创建缩略图与给定的图像在中心。

浏览 4提问于2010-09-28得票数 3

回答已采纳

5回答

单击图像后对其进行更改

javascript、css、image、sprite

我正在尝试使用CSS和图像精灵来使一个链接显示为一个图像，一旦它悬停在上面，一旦它被点击，它就会改变。我已经尝试过CSS和JavaScript很久了，现在我只需要一些关于如何让它工作的方向。我已经设法使它改变，一旦它悬停，然而，我真正需要做的是有图像更改一旦它被点击。因此，begin with it显示播放按钮，单击时显示暂停按钮，再次单击后显示播放按钮等。从我收集的信息来看，我需要使用JavaScript和onclick事件。然而，

浏览 9提问于2012-12-21得票数 2

回答已采纳

1回答

需要空div的背景图像以适当的比例显示在所有屏幕上。

css、wordpress、background、responsive-design、background-size

我有一个部分，最初将只包含一个播放按钮，将显示一个视频库一旦点击。本节还必须包含一个图像，我决定将其作为background包含到节本身(#intro)中。问题是，由于除了播放按钮之外，在部分中没有任何内容，背景没有足够的垂直拉伸来显示整个背景图像。我弥补了这一点，包括了57.201%的padding-bottom。这最初修正了它，但我也不得不将play按钮放置在中间，一旦我尝试用边距和垫子做这个操作，由于我为padding-bottom设置的百分比，在调整浏览器大小后

浏览 3提问于2014-09-08得票数 0

2回答

如何在悬停一张图片时更改另一张图片的CSS？

html、css、image、opacity、fade

因此，当使用html/css悬停时，我尝试淡入和淡出一个图像。这些图像堆叠在一起。一个是透明的播放按钮(必须在顶部？)另一张是一张照片。悬停时，我希望播放按钮淡入淡出图片。something" src="imagesrc" alt="" /></a> <img class = "vidImage" src="imagesrc" alt=&qu

浏览 1提问于2013-04-09得票数 0

1回答

(隐藏视频)CSS显示:没有一个不使用iPhone的@media查询

css、responsive、ios

我试图使用@media查询来隐藏一个自动播放的视频，该视频作为登陆页面在循环中自动播放。我想用一个短的，全宽度的，响应响应的.gif背景来代替隐藏的视频。下面是正在使用的CSS的副本：@media (max-width: 767px) {background: url('landing.gif') centerimportant; 我已经成功地用循环的gif替换了视频，但是大播放按钮仍然出现在io

浏览 1提问于2016-05-11得票数 0

回答已采纳

2回答

如何隐藏出现在视频上的YouTube播放按钮？

javascript、html、youtube-api

我想摆脱你的管播放按钮，你在图像上看到，如果可能的话，还有这第一帧。我想使用我自己的播放按钮，和我自己的第一帧作为img标签，这实际上已经在那里，并工作。但是当我运行API playVideo()方法时，我隐藏了我的播放按钮和第一帧，我看到(片刻)有youtube播放按钮和youtube第一帧，你可以在附加的图像上看到它们。

浏览 0提问于2012-02-17得票数 4

回答已采纳

2回答

鼠标悬停的图像弹出

jquery、html、css、hover

我在我用HTML构建的网页上有一个播放按钮的图像，但是我添加了一些代码，它已经将图像更改为正方形，或者它在我的play按钮上创建了一个正方形图像。 $('.thumbnail').removeClass('

浏览 2提问于2014-08-31得票数 0

回答已采纳

2回答

防止iframe播放youtube视频

javascript、html、iframe、youtube-api、youtube-iframe-api

在iframe中是否有防止它播放视频的选项，例如，我有下面的iframe： <iframe src="https://www.youtube.com/embed/v2ifWcnQs6M" width="那么，在iframe或js中是否有HTML属性来解决这个问题呢？

浏览 1提问于2015-09-16得票数 2

回答已采纳

1回答

在页面上拖放影片div

jquery、drag-and-drop、movie

我的任务是能够选择一个图像并将其移动到屏幕上的某个区域(称为电影屏幕)，然后让他们使用像播放按钮这样的事件进行播放。除了可能指向一些使用对象移动的示例之外，我不会认真地期望任何响应，例如电影文件而不是静态图像。

浏览 1提问于2011-07-28得票数 0

回答已采纳

1回答

如何使用CSS设计png图标的样式？

css、image、png、styling

我有一个PNG图像，我正在使用作为一个图标。播放按钮的拍摄方式略有不同。我知道，当我使用字体-令人敬畏的播放按钮图标时，我可以用CSS做各种各样的事情。如何使我的png图像图标触控？

浏览 2提问于2015-03-28得票数 1

回答已采纳

1回答

在Video.js中，当鼠标悬停在视频上时，我可以在哪里更改大播放按钮的颜色？

javascript、css、video、html5-video、video.js

使用video.js默认皮肤编辑器(CodePen)，我成功地将SCSS $主背景色更改为橙色(特别是#f60)，生成CSS以提供控件条组件的背景和橙色的大播放按钮变体。这很好，但是当我将鼠标光标移到视频上时，大播放按钮的背景会更改为灰蓝色(默认情况)，然后当鼠标不在视频上时，返回到橙色。无论鼠标在哪里，我都希望大播放按钮在任何时候都保持橙色。我在默认的皮肤编辑器中在CSS/SCSS中搜索，但是当鼠标<em

浏览 2提问于2016-01-10得票数 0

回答已采纳

1回答

Spotify API获取艺术家跟踪数据返回错误未经授权

javascript、reactjs

显示在他的网站上，并显示播放按钮，当每个人悬停在歌曲图像上播放它。我在这里做错什么了？限制他们只有9个轨道。在每首曲目上添加播放按钮，播放30秒的歌曲。：'GET'，Header:新标头({ 'Accept'：'application/json'，’Content‘：’text/平原‘，’授权‘：’承载‘}) }

浏览 3提问于2017-06-07得票数 0

2回答

动画GIF与jQuery动画性能对比

jquery、html

我正在建设一个网站，其中有一堆轨道旋转木马(在一个页面上)，每个旋转木马将有一个播放/暂停按钮。我在想，与使用jquery相比，动画gif对性能的影响要小一些，因为我们在页面上有10+ carousel(不要问为什么)。我想知道我是否正确。我使用的jquery代码应该是这样的(我没有对它进行编码，所以不要介意语法错误)： $('.pausebutton').animate

浏览 2提问于2013-10-18得票数 1

2回答

如何添加一个“播放按钮”，如叠加图像时，分享到Facebook？

javascript、jquery、ruby-on-rails、image-processing、overlay

首先，这与以下问题不同：我想知道的是如何在另一张现有图片的基础上叠加播放按钮图像，并将其分享给Facebook。唯一的办法，我看到是创建一个新的图像与覆盖包括在内。理想情况下，我不想将映像存储到我的服务器上。如果这是唯一的方法，那么最简单的方法是什么？创建这类图像的库吗？

浏览 2提问于2012-04-20得票数 0

回答已采纳

3回答

视频缩略图在Facebook共享链接上没有播放按钮

facebook、facebook-opengraph

通过我的网站在Facebook上共享的视频链接在共享链接中只显示为图像；Facebook似乎没有将内容识别为视频。q=www.vlikeviral.com%2Fvideos%2Fplay%3Fid%3D10> 显示在链接下的缩略图上没有播放按钮。正如您在调试详细信息中看到的那样，页面上已经存在适当的og标记。

浏览 3提问于2012-03-09得票数 1

回答已采纳

点击加载更多