css Question posted in
Some basic documentation can be found here.

CSS class not fully applied to button inside span element

style in span is partially not working.
I am trying to set css component on my buttons.
there are 3 buttons in total and two of them were already exsisted before I mand. css class is successfully applied on those 2 buttons but not for the only one I just have made.

  1. here are codes. the button that is causing problem is the first span, "info-button".
<div class="buttons">
    ***<span class="button-navy">
        <button type="button" class="info-button">안내</button>
    </span>***
    <span class="button-navy">
        <button type="button" class="search-button" ng-disabled="!ctrl.displayed || ctrl.displayed.length == 0" ng-click="ctrl.printOut()">출력</button>
    </span>
    <span class="button-blue">
        <button type="button" class="search-button" ng-click="ctrl.reloadl()">새로고침</button>
    </span> 
</div>
  1. the classes with style is "button-navy" and "button-blue" with background colored tags. I tried to apply both types but not working.
  2. "info-button" and "search-button" doesn’t have any styles
  3. I have tried power refresh several times but it doesnt seem working.

if I have checked the priority on css, what should I check next?

Tags:

2

Answers


  1. 0

    Yes, you can achieve this effect using the background-clip property and the rgba color value. The key is to use an rgba color for the background of element1 with the desired color and the same alpha value as element2. This way, the color of element1 will be preserved, and only its opacity will be affected.

    

    

        <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        .element2 {
          background-color: rgba(255, 0, 0, 0.8); /* Semi-transparent red background */
          padding: 20px;
        }

        .element1 {
          background-color: rgba(0, 0, 255, 0.8); /* Semi-transparent blue background */
          padding: 10px;
          /* Use background-clip to only apply the background within the padding box */
          background-clip: padding-box;
        }
      </style>
    </head>
    <body>
      <div class="element2">
        <div class="element1">
          Content of element1
        </div>
        Other content of element2
      </div>
    </body>
    </html>
    

    

    

    

    In this example, element2 has a semi-transparent red background, and element1 has a semi-transparent blue background. The background-clip: padding-box; property ensures that the background is only applied within the padding box of element1, allowing the content to have its own color while inheriting the opacity from the parent. Adjust the colors and alpha values as needed for your specific design.
    Login or Signup to reply.
  2. 0

    first check you do you linked css file correctly. And if it’s yes please try access classess with parent class.

    Eg:-

    .buttons .button-navy .info-button{
   your stylings
}

    or you can use important ketword as follow,

    color:red!important;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search