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

Css – Get crosses created by linear-gradient in front of span background

the following html/css creates:
enter image description here
the difference is only in the span style using a background-color in the second cell.
You can see, that the crosses are then behind the text and the background-color.
I can not use pseudo elements because sometimes inline styles have to be used (do not ask why this is asked for, it is just wanted in special circumstances)
I tried a bit around with z-index but had no success.
Is there a way to get the crosses in the foreground? Best with only changing the td style?
The cell may have any backcolor and the span may have any backcolor
Thanks for any idea

<table>
            <tbody><tr>
                <td style="width: 56.7pt; border: 1px solid red;
                    background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                        linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                    background-color: green;
                    background-size: 100% 100%;
                     background-clip: padding-box;">
                    <p>     
                        <span style=" color: #000000;">Content</span>
                    </p>
                </td>
                <td style="width: 56.7pt;  border: 1px solid red;
                    background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                        linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                    background-color: green;
                    background-size: 100% 100%;
                     background-clip: padding-box;">
                    <p>     
                        <span style="background: #FF00FF; color: #000000;">Content</span>
                    </p>
                </td>
                <td style="width: 56.7pt;  border: 1px solid red;
                    background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                        linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                    background-color: grey;
                    background-size: 100% 100%;
                     background-clip: padding-box;">
                    <p>     
                        <span style="background: #FF00FF; color: #000000;">Content</span>
                    </p>
                </td>
            </tr>
        </tbody></table>
Tags:

2

Answers


  1. 0

    Use pseudo-element and remove the inline styles:

    td {
  width: 56.7pt;
  border: 1px solid red;
  position: relative;
  background-color: white;
}

td:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
   linear-gradient(to right bottom, #0000 49.9%, black 50% 52%,#0000 52.1%), 
   linear-gradient(to right top,    #0000 49.9%, blue  50% 51%,#0000 51.1%);
  pointer-events: none;
}
    <table>
  <tr>
    <td >
      <p>
        <span style=" color: #000000;">Content</span>
      </p>
    </td>
    <td >
      <p>
        <span style="background: #FF00FF; color: #000000;">Content</span>
      </p>
    </td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    I do not think that you can get the desired result altering only the td styles. The reason being that you have to separate out the cross background image from the plain color background. They must not be in the same plain so the child elements can be slipped between the two.

    This snippet therefore uses perspective-3d and puts the td background color on the child element, simulated with a large box-shadow which then gets clipped – the horizontal sides through a clip path on the child itself and the vertical with a clip on the tr.

    Yes, it’s hacky but it does work for the given code.

    <table>
  <tbody>
    <tr style="clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);">
      <td style="width: 56.7pt; border: 1px solid red;
                    background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                        linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                    background-size: 100% 100%;
                    background-clip: padding-box;
                    transform-style: preserve-3d;
                    --bg: green;">
        <p style="clip-path: polygon(-2px -100vmax, calc(100% + 2px) -100vmax, calc(100% + 2px) 100vmax, -2px 100vmax); transform: translateZ(-1px); background-color: var(--bg); box-shadow: 0px 0px 0 100vmax var(--bg);">
          <span style=" color: #000000;">Content</span>
        </p>
      </td>
      <td style="width: 56.7pt;  border: 1px solid red;
                    background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                        linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                    background-size: 100% 100%;
                    background-clip: padding-box;
                    transform-style: preserve-3d;
                    --bg: green;
                    ">
        <p style="clip-path: polygon(-2px -100vmax, calc(100% + 2px) -100vmax, calc(100% + 2px) 100vmax, -2px 100vmax); transform: translateZ(-1px); background-color: var(--bg); box-shadow: 0px 0px 0 100vmax var(--bg);">
          <span style="background: #FF00FF; color: #000000;">Content</span>
        </p>
      </td>
      <td style="width: 56.7pt;  border: 1px solid red;
                    background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                        linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                    background-size: 100% 100%;
                     background-clip: padding-box;
                    transform-style: preserve-3d;
                    --bg: grey;">
        <p style="clip-path: polygon(-2px -100vmax, calc(100% + 2px) -100vmax, calc(100% + 2px) 100vmax, -2px 100vmax); transform: translateZ(-1px); background-color: var(--bg); box-shadow: 0px 0px 0 100vmax var(--bg);">
          <span style="background: #FF00FF; color: #000000;">Content</span>
        </p>
      </td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search