Make text holder background transparent

Hi to anyone out there that may hold a solution to my frustrating problem

I am using the Shopify theme which has a slider eith a text box that lays over the image. I am trying to make the background of the text only 50% opacity but when I add the script in the style.css file it makes the text transparent as well.Please can anyone tell me how I can overcome this? I will be so grateful. Thanks in advance!
-Larissa

Here is the code.

/* Slide Caption */
.caption {
text-transform: uppercase;
font-weight: bold;
color: #fff;
background: #000;
line-height: 130%;
position: absolute;
z-index: 10;
padding: 10px;
max-width: 90%;
max-height: 50%;
overflow: hidden;

This is what it looks like with the opacity filter

/* Slide Caption */
.caption {
text-transform: uppercase;
font-weight: bold;
color: #fff;
background: #000;
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter:alpha(opacity=50);
opacity: 0.5;
line-height: 130%;
position: absolute;
z-index: 10;
padding: 10px;
max-width: 90%;
max-height: 50%;
overflow: hidden;