CSS：在图像上放置按钮

huangapple
go评论159阅读模式
英文:

CSS: Placing a button over an Image

问题

以下是代码的部分翻译：

  1. .HomepageBannerContainer {
  2. }
  3. .HomepageBannerImage1 {
  4.   position: relative;
  5.   height: 100%;
  6.   width: 100%;
  7. }
  8. .buttonOnImage {
  9.   position: absolute;
  10.   bottom: 0px;
  11.   right: 15px;
  12.   border-color: Goldenrod;
  13.   border-style: solid;
  14.   background-color: transparent;
  15.   padding: 15px 32px;
  16.   text-align: center;
  17.   color: goldenrod;
  18.   font-size: 16px;
  19.   cursor: pointer;
  20.   -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  21.   clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  22. }
  23. .buttonOnImage:hover {
  24.   background-color: ;
  25.   color: white;
  26. }
  1. <div class="HomepageBannerContainer">
  2.    <img src="https://mvdataappstorageuscaprod.blob.core.windows.net/medialibrary-77aaba81e0484f88ba36c3c3b1e9c663-r/885635f1713f4b9ea1ceb61b3aba783f/885635f1713f4b9ea1ceb61b3aba783f/Large/4000D_RGB_AF_WHITE_RENDER_24.png?sv=2017-04-17&amp;sr=b&amp;si=201911192214&amp;sig=5TpJjopZRU%2FP5fwW4FBdL1jW12h8hx2PgtfyINKMkmM%3D&amp;st=1404-09-08T23%3A38%3A03Z&amp;se=2033-03-20T00%3A26%3A35Z" alt="" class="HomepageBannerImage1">
  3.    <button class="buttonOnImage" type="button"> Corsair Configuration
  4.    </button>
  5. </div>
英文:

I am trying to make a button class that I can repeat across the website and several different images but I am unable to get this to overlap the image in the place where I would like, example bottom right. It is sitting in obscure areas that aren't relevant to the container?

I am aware that using an actual size (i.e px) for

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .HomepageBannerContainer {
  2. }
  3. .HomepageBannerImage1 {
  4.   position: relative;
  5.   height: 100%;
  6.   width: 100%;
  7. }
  8. .buttonOnImage {
  9.   position: absolute;
  10.   bottom: 0px;
  11.   right: 15px;
  12.   border-color: Goldenrod;
  13.   border-style: solid;
  14.   background-color: transparent;
  15.   padding: 15px 32px;
  16.   text-align: center;
  17.   color: goldenrod;
  18.   font-size: 16px;
  19.   cursor: pointer;
  20.   -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  21.   clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  22. }
  23. .buttonOnImage:hover {
  24.   background-color: ;
  25.   color: white;
  26. }

<!-- language: lang-html -->

  1.   &lt;div class=&quot;HomepageBannerContainer&quot;&gt; 
  2.      &lt;img src=&quot;https://mvdataappstorageuscaprod.blob.core.windows.net/medialibrary-77aaba81e0484f88ba36c3c3b1e9c663-r/885635f1713f4b9ea1ceb61b3aba783f/885635f1713f4b9ea1ceb61b3aba783f/Large/4000D_RGB_AF_WHITE_RENDER_24.png?sv=2017-04-17&amp;sr=b&amp;si=201911192214&amp;sig=5TpJjopZRU%2FP5fwW4FBdL1jW12h8hx2PgtfyINKMkmM%3D&amp;st=1404-09-08T23%3A38%3A03Z&amp;se=2033-03-20T00%3A26%3A35Z&quot; alt=&quot;&quot; class=&quot;HomepageBannerImage1&quot;&gt;
  3. &lt;button class=&quot;buttonOnImage&quot; type=&quot;button&quot;&gt; Corsair Configuration
  4.     &lt;/button&gt;
  5.   &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是CSS代码的中文翻译部分：

  1. .HomepageBannerContainer {
  2.   position: relative;
  3. }
  5. .HomepageBannerImage1 {
  6.   height: 100%;
  7.   width: 100%;
  8. }
  10. .buttonOnImage {
  11.   position: absolute;
  12.   /* 这将使它相对于其容器定位 */
  13.   top: 50%;
  14.   /* 接下来的三行将使它位于图像中间 */
  15.   left: 50%;
  16.   transform: translate(-50%, -50%);
  17.   border-color: Goldenrod;
  18.   border-style: solid;
  19.   background-color: transparent;
  20.   padding: 15px 32px;
  21.   text-align: center;
  22.   color: goldenrod;
  23.   font-size: 16px;
  24.   cursor: pointer;
  25.   -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  26.   clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  27. }
  29. .buttonOnImage:hover {
  30.   background-color: ;
  31.   color: white;
  32. }

请注意，最后一个background-color属性的值似乎缺失。

英文:

Try this (only the CSS was edited) :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .HomepageBannerContainer {
  2.   position: relative;
  3. }
  5. .HomepageBannerImage1 {
  6.   height: 100%;
  7.   width: 100%;
  8. }
  10. .buttonOnImage {
  11.   position: absolute;
  12.   /* this will position it relative to its container */
  13.   top: 50%;
  14.   /* these next three lines will position it in the middle of the image */
  15.   left: 50%;
  16.   transform: translate(-50%, -50%);
  17.   border-color: Goldenrod;
  18.   border-style: solid;
  19.   background-color: transparent;
  20.   padding: 15px 32px;
  21.   text-align: center;
  22.   color: goldenrod;
  23.   font-size: 16px;
  24.   cursor: pointer;
  25.   -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  26.   clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  27. }
  29. .buttonOnImage:hover {
  30.   background-color: ;
  31.   color: white;
  32. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;HomepageBannerContainer&quot;&gt;
  2.   &lt;img src=&quot;https://mvdataappstorageuscaprod.blob.core.windows.net/medialibrary-77aaba81e0484f88ba36c3c3b1e9c663-r/885635f1713f4b9ea1ceb61b3aba783f/885635f1713f4b9ea1ceb61b3aba783f/Large/4000D_RGB_AF_WHITE_RENDER_24.png?sv=2017-04-17&amp;sr=b&amp;si=201911192214&amp;sig=5TpJjopZRU%2FP5fwW4FBdL1jW12h8hx2PgtfyINKMkmM%3D&amp;st=1404-09-08T23%3A38%3A03Z&amp;se=2033-03-20T00%3A26%3A35Z&quot;
  3.     alt=&quot;&quot; class=&quot;HomepageBannerImage1&quot;&gt;
  4.   &lt;button class=&quot;buttonOnImage&quot; type=&quot;button&quot;&gt; Corsair Configuration
  5.     &lt;/button&gt;
  6. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月20日 23:49:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/75792466.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定